<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>React Native学习之适配Android/IOS总结篇 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="react,RN,">
  

  <meta name="description" content="一、环境搭建1.1 React Native环境搭建1.1.1 IOS环境搭建 环境：MacOS  # 如果你已经安装了 Node，请检查其版本是否在 v8.3 以上brew install node # Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能brew install watchman  注意：不要使用 cnpm！cnpm 安装的模块">
<meta name="keywords" content="react,RN">
<meta property="og:type" content="article">
<meta property="og:title" content="React Native学习之适配Android&#x2F;IOS总结篇">
<meta property="og:url" content="http://blog.poetries.top/2019/06/08/rn-summary/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="一、环境搭建1.1 React Native环境搭建1.1.1 IOS环境搭建 环境：MacOS  # 如果你已经安装了 Node，请检查其版本是否在 v8.3 以上brew install node # Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能brew install watchman  注意：不要使用 cnpm！cnpm 安装的模块">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/513.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/514.gif">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/515.png">
<meta property="og:image" content="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/master/React%20Native%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%BF%83%E5%BE%97/images/Sourcesmianban.jpg">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/516.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/517.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/518.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/519.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/520.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/521.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/522.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/523.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/524.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/525.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/526.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/527.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/528.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/529.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/530.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/531.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/532.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/533.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/534.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/535.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/536.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/537.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/538.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/539.png">
<meta property="og:image" content="https://mdn.mozillademos.org/files/12998/flexbox.png">
<meta property="og:image" content="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/flexDirection.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/flexWrap.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/justifyContent.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/alignItems.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/alignSelf.jpg">
<meta property="og:image" content="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/flex.jpg">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/540.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/541.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/542.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/543.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/544.png">
<meta property="og:updated_time" content="2020-08-15T04:25:31.934Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="React Native学习之适配Android&#x2F;IOS总结篇">
<meta name="twitter:description" content="一、环境搭建1.1 React Native环境搭建1.1.1 IOS环境搭建 环境：MacOS  # 如果你已经安装了 Node，请检查其版本是否在 v8.3 以上brew install node # Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能brew install watchman  注意：不要使用 cnpm！cnpm 安装的模块">
<meta name="twitter:image" content="https://poetries1.gitee.io/img-repo/2019/10/513.png">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#一、环境搭建"><span class="toc-text">一、环境搭建</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-React-Native环境搭建"><span class="toc-text">1.1 React Native环境搭建</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1-1-IOS环境搭建"><span class="toc-text">1.1.1 IOS环境搭建</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1-2-安卓环境搭建"><span class="toc-text">1.1.2 安卓环境搭建</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-安卓设备真机调试"><span class="toc-text">1.2 安卓设备真机调试</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-移除vscode装饰器报错"><span class="toc-text">1.3 移除vscode装饰器报错</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#二、矢量图标的运用"><span class="toc-text">二、矢量图标的运用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-android平台"><span class="toc-text">2.1 android平台</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-IOS平台"><span class="toc-text">2.2 IOS平台</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#三、react-native-router-flux的使用"><span class="toc-text">三、react-native-router-flux的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-简介"><span class="toc-text">3.1 简介</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2-简单例子"><span class="toc-text">3.2 简单例子</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-3-react-native-router-flux之API"><span class="toc-text">3.3 react-native-router-flux之API</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-1-Router"><span class="toc-text">3.3.1 Router</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-2-Scene"><span class="toc-text">3.3.2 Scene</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-3-Tabs-or"><span class="toc-text">3.3.3 Tabs ( or )</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-4-Stack"><span class="toc-text">3.3.4 Stack ()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-5-Tab-Scene-child-within-Tabs"><span class="toc-text">3.3.5 Tab Scene (child  within Tabs)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-6-Drawer-or"><span class="toc-text">3.3.6 Drawer ( or )</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-7-Modals-or"><span class="toc-text">3.3.7 Modals ( or )</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-8-Lightbox"><span class="toc-text">3.3.8 Lightbox ()</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-9-Actions"><span class="toc-text">3.3.9 Actions</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-10-ActionConst"><span class="toc-text">3.3.10 ActionConst</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-11-Universal-and-Deep-Linking"><span class="toc-text">3.3.11 Universal and Deep Linking</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#四、React-Native基础知识"><span class="toc-text">四、React Native基础知识</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#4-1-常见组件"><span class="toc-text">4.1 常见组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-2-样式"><span class="toc-text">4.2 样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-3-高度与宽度"><span class="toc-text">4.3 高度与宽度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-4-处理文本输入"><span class="toc-text">4.4 处理文本输入</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-5-如何使用滚动视图"><span class="toc-text">4.5 如何使用滚动视图</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-6-如何使用长列表"><span class="toc-text">4.6 如何使用长列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-7-网络"><span class="toc-text">4.7 网络</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#五、React-Native布局"><span class="toc-text">五、React Native布局</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#5-1-宽和高"><span class="toc-text">5.1 宽和高</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-2-和web中的差异"><span class="toc-text">5.2 和web中的差异</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-3-Layout"><span class="toc-text">5.3 Layout</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-1-容器属性"><span class="toc-text">5.3.1 容器属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-2-横轴和竖轴"><span class="toc-text">5.3.2 横轴和竖轴</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-3-flexDirection"><span class="toc-text">5.3.3 flexDirection</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-4-flexWrap"><span class="toc-text">5.3.4 flexWrap</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-5-justifyContent"><span class="toc-text">5.3.5 justifyContent</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-6-alignItems"><span class="toc-text">5.3.6 alignItems</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-7-alignSelf"><span class="toc-text">5.3.7 alignSelf</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-3-8-flex"><span class="toc-text">5.3.8 flex</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-4-视图边框"><span class="toc-text">5.4 视图边框</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-5-尺寸"><span class="toc-text">5.5 尺寸</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-6-外边距"><span class="toc-text">5.6 外边距</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-7-内边距"><span class="toc-text">5.7 内边距</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-8-边缘"><span class="toc-text">5.8 边缘</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-9-定位-position"><span class="toc-text">5.9 定位(position)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#六、React-Native适配"><span class="toc-text">六、React Native适配</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#6-1-Platform-OS"><span class="toc-text">6.1 Platform.OS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-2-留意api-doc的android或ios标识"><span class="toc-text">6.2 留意api doc的android或ios标识</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-3-组件选择"><span class="toc-text">6.3 组件选择</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-4-图片适配"><span class="toc-text">6.4 图片适配</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#七、react-navigation"><span class="toc-text">七、react-navigation</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#7-1-页面切换"><span class="toc-text">7.1 页面切换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-2-传递参数给路由"><span class="toc-text">7.2 传递参数给路由</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-3-配置标题栏"><span class="toc-text">7.3 配置标题栏</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#7-3-1-动态设置标题"><span class="toc-text">7.3.1 动态设置标题</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-3-2-使用setParams更新navigationOptions"><span class="toc-text">7.3.2 使用setParams更新navigationOptions</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-3-3-调整标题样式"><span class="toc-text">7.3.3 调整标题样式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-3-4-统一配置所有页面头部defaultNavigationOptions"><span class="toc-text">7.3.4 统一配置所有页面头部defaultNavigationOptions</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-3-5-覆盖共享的navigationOptions"><span class="toc-text">7.3.5 覆盖共享的navigationOptions</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-4-标题栏和其所属的页面之间的交互"><span class="toc-text">7.4 标题栏和其所属的页面之间的交互</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#八、打包"><span class="toc-text">八、打包</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#8-1-修改app名称、logo、启动图"><span class="toc-text">8.1 修改app名称、logo、启动图</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-2-Android打包APK"><span class="toc-text">8.2 Android打包APK</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-3-IOS打包"><span class="toc-text">8.3 IOS打包</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#九、更多参考"><span class="toc-text">九、更多参考</span></a></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-rn-summary" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">React Native学习之适配Android/IOS总结篇</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2019.06.08</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 12.3k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 53分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <h2 id="一、环境搭建"><a href="#一、环境搭建" class="headerlink" title="一、环境搭建"></a>一、环境搭建</h2><h3 id="1-1-React-Native环境搭建"><a href="#1-1-React-Native环境搭建" class="headerlink" title="1.1 React Native环境搭建"></a>1.1 React Native环境搭建</h3><h4 id="1-1-1-IOS环境搭建"><a href="#1-1-1-IOS环境搭建" class="headerlink" title="1.1.1 IOS环境搭建"></a>1.1.1 IOS环境搭建</h4><blockquote>
<p>环境：<code>MacOS</code></p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 如果你已经安装了 Node，请检查其版本是否在 v8.3 以上</span></span><br><span class="line">brew install node </span><br><span class="line"></span><br><span class="line"><span class="comment"># Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能</span></span><br><span class="line">brew install watchman</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>注意</strong>：不要使用 <code>cnpm</code>！<code>cnpm</code> 安装的模块路径比较奇怪，<code>packager</code> 不能正常识别！</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install -g yarn react-native-cli</span><br></pre></td></tr></table></figure>
<p><strong>1. 创建新项目</strong></p>
<blockquote>
<p><code>init</code> 命令默认会创建最新的版本，而目前最新的<code>0.45</code> 及以上版本需要下载 <code>boost</code> 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行<code>iOS</code>项目。可以暂时创建<code>0.44.3</code>的版本</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">react-native init MyApp --version 0.44.3</span><br></pre></td></tr></table></figure>
<p><strong>2. 编译并运行 React Native 应用</strong></p>
<p>1). <strong>运行方式一</strong> 在你的项目目录中运行<code>react-native run-ios</code></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">cd MyApp</span><br><span class="line">react-native run-ios</span><br></pre></td></tr></table></figure>
<p>2). <strong>运行方式二</strong> 在<code>xCode</code>中运行</p>
<blockquote>
<p>打开<code>xcode</code>选择项目中<code>myApp/ios/myApp.xcodeproj</code>，然后点击左上角运行即可</p>
</blockquote>
<blockquote>
<p>更多详情 <a href="https://reactnative.cn/docs/getting-started.html" target="_blank" rel="noopener">https://reactnative.cn/docs/getting-started.html</a></p>
</blockquote>
<p><strong>3. 远程调试</strong></p>
<ul>
<li><code>ctrl + R</code>刷新</li>
<li><code>ctrl + D</code> 选择对应的工具调试</li>
</ul>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/513.png" alt></p>
<p><strong>Enable Live Reload</strong></p>
<blockquote>
<p>当你的js代码发生变化后，<code>React Native</code>会自动生成bundle然后传输到模拟器或手机上</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/514.gif" alt></p>
<blockquote>
<p>在浏览器中打开 <a href="http://localhost:8081/debugger-ui" target="_blank" rel="noopener">http://localhost:8081/debugger-ui</a></p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/515.png" alt></p>
<p><strong>巧用Sources面板</strong></p>
<p><img src="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/master/React%20Native%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%BF%83%E5%BE%97/images/Sourcesmianban.jpg" alt></p>
<p><strong>指定模拟的设备类型</strong></p>
<ul>
<li>你可以使用<code>--simulator</code>参数，在其后加上要使用的设备名称来指定要模拟的设备类型（目前默认为<code>&quot;iPhone X&quot;</code>）。如果你要模拟 <code>iPhone 4s</code>，那么这样运行命令即可：<code>react-native run-ios --simulator &quot;iPhone 4s&quot;</code>。</li>
<li>你可以在终端中运行<code>xcrun simctl list devices</code>来查看具体可用的设备名称</li>
</ul>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/516.png" alt></p>
<h4 id="1-1-2-安卓环境搭建"><a href="#1-1-2-安卓环境搭建" class="headerlink" title="1.1.2 安卓环境搭建"></a>1.1.2 安卓环境搭建</h4><p><strong>安装依赖</strong></p>
<blockquote>
<p>必须安装的依赖有：<code>Node</code>、<code>Watchman</code> 和 <code>React Native</code> 命令行工具以及 JDK 和 <code>Android Studio</code></p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">brew install node</span><br><span class="line">brew install watchman</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install -g yarn react-native-cli</span><br></pre></td></tr></table></figure>
<p><strong>Java Development Kit</strong></p>
<blockquote>
<p><code>React Native</code> 需要 <code>Java Development Kit [JDK] 1.8</code>（暂不支持 <code>1.9</code> 及更高版本）。你可以在命令行中输入</p>
</blockquote>
<ul>
<li><code>javac -version</code>来查看你当前安装的 <code>JDK</code>版本。如果版本不合要求，则可以到 <a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank" rel="noopener">官网</a>上下载</li>
</ul>
<p><strong>1. 安装 Android Studio</strong></p>
<blockquote>
<p>首先下载和安装 <a href="https://developer.android.com/studio/index.html" target="_blank" rel="noopener"><code>Android Studio</code></a>，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择”Custom”选项，确保选中了以下几项</p>
</blockquote>
<ul>
<li><code>Android SDK</code></li>
<li><code>Android SDK Platform</code></li>
<li><code>Performance (Intel ® HAXM)</code></li>
<li><code>Android Virtual Device</code></li>
</ul>
<blockquote>
<p>然后点击”<code>Next</code>“来安装选中的组件。安装完成后，看到欢迎界面时，就可以进行下面的操作了</p>
</blockquote>
<p><strong>2. 安装 Android SDK</strong></p>
<blockquote>
<p><code>Android Studio</code> 默认会安装最新版本的 <code>Android SDK</code>。目前编译 <code>React Native</code> 应用需要的是<code>Android 8.1 (Oreo)</code>版本的 <code>SDK</code>。你可以在 <code>Android Studio</code> 的 <code>SDK Manager</code> 中选择安装各版本的 <code>SDK</code></p>
</blockquote>
<p>你可以在 <code>Android Studio</code> 的欢迎界面中找到 <code>SDK Manager</code>。点击”<code>Configure</code>“，然后就能看到”<code>SDK Manager</code>“。</p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/517.png" alt></p>
<blockquote>
<p>在 <code>SDK Manager</code>中选择”<code>SDK Platforms</code>“选项卡，然后在右下角勾选”<code>Show Package Details</code>“。展开<code>Android 8.1 (Oreo)</code>选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：</p>
</blockquote>
<ul>
<li><code>Android SDK Platform 27</code></li>
<li><code>Intel x86 Atom_64 System Image</code>（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）</li>
</ul>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/518.png" alt></p>
<blockquote>
<p><code>SDK Manager</code> 还可以在<code>Android Studio</code> 的”Preferences”菜单中找到。具体路径是<code>Appearance &amp; Behavior → System Settings → Android SDK</code></p>
</blockquote>
<ul>
<li>然后点击”<code>SDK Tools</code>“选项卡，同样勾中右下角的”<code>Show Package Details</code>“。展开”<code>Android SDK Build-Tools</code>“选项，确保选中了 <code>React Native</code> 所必须的<code>27.0.3</code>版本。你可以同时安装多个其他版本</li>
</ul>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/519.png" alt></p>
<blockquote>
<p>最后点击”<code>Apply</code>“来下载和安装这些组件。</p>
</blockquote>
<p><strong>3. 配置 ANDROID_HOME 环境变量</strong></p>
<blockquote>
<p><code>React Native</code> 需要通过环境变量来了解你的 <code>Android SDK</code> 装在什么路径，从而正常进行编译</p>
</blockquote>
<ul>
<li>具体的做法是把下面的命令加入到<code>~/.bash_profile</code>文件中</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。</span></span><br><span class="line"><span class="built_in">export</span> ANDROID_HOME=<span class="variable">$HOME</span>/Library/Android/sdk</span><br><span class="line"><span class="built_in">export</span> PATH=<span class="variable">$PATH</span>:<span class="variable">$ANDROID_HOME</span>/tools</span><br><span class="line"><span class="built_in">export</span> PATH=<span class="variable">$PATH</span>:<span class="variable">$ANDROID_HOME</span>/tools/bin</span><br><span class="line"><span class="built_in">export</span> PATH=<span class="variable">$PATH</span>:<span class="variable">$ANDROID_HOME</span>/platform-tools</span><br><span class="line"><span class="built_in">export</span> PATH=<span class="variable">$PATH</span>:<span class="variable">$ANDROID_HOME</span>/emulator</span><br></pre></td></tr></table></figure>
<blockquote>
<p>如果你的命令行不是 <code>bash</code>，而是例如 <code>zsh</code> 等其他，请使用对应的配置文件</p>
</blockquote>
<blockquote>
<p>使用<code>source $HOME/.bash_profile</code>命令来使环境变量设置立即生效（否则重启后才生效）。可以使用<code>echo $ANDROID_HOME</code>检查此变量是否已正确设置</p>
</blockquote>
<p><strong>4. 编译并运行 React Native 应用</strong></p>
<blockquote>
<p>确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行<code>react-native run-android</code></p>
</blockquote>
<p><strong>Android Studio自带工具运行</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/520.png" alt></p>
<p><strong>使用genymotion模拟器</strong></p>
<blockquote>
<p>去官网需要注册并下载<a href="https://www.genymotion.com/，需要注册登录再下载的。注意下载`with" target="_blank" rel="noopener">https://www.genymotion.com/，需要注册登录再下载的。注意下载`with</a> virtualBox`版本，然后安装完成后需要登录，就是刚才注册的账号。登录后进入这个页面做两个操作</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/521.png" alt></p>
<blockquote>
<p>点击<code>settings</code>，选择<code>adb</code>设置<code>sdk</code>就是刚才一直用的<code>sdk</code>安装路径,如下</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/522.png" alt></p>
<blockquote>
<p>启动项目，点击<code>genymotion</code>里的<code>start</code>启动我们刚才安装好的的虚拟设备，是这个样子的，此时我们刚才初始化的项目还没连上虚拟设备</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/523.png" alt></p>
<blockquote>
<p>然后在我们的工程项目里执行<code>adb devices</code>会列出当前启动的虚拟设备，能检测到说明没问题，如下图里最后一行显示的就是刚才我们开启的<code>genymotion</code>那台虚拟设备</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/524.png" alt></p>
<p>最后项目目录里执行</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">react-native run-android</span><br></pre></td></tr></table></figure>
<blockquote>
<p>打开<code>genymotion</code>，欢迎页面出来了，成功，修改一下文字，重新加载一遍，成功</p>
</blockquote>
<ul>
<li>第一次默认不是热加载形式，就是改变文件内容需要手动刷新的，这里设置一下热加载，以后内容这里就会自动刷新，<code>mac</code>是执行<code>command+r</code>，选择第四个<code>hot reloading</code></li>
</ul>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/525.png" alt></p>
<blockquote>
<p>运行<code>react-native run-andriod</code> 会下载很多东西，然后出现这个标志说明编译没有问题，还缺少一个模拟设备</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/526.png" alt><br><img src="https://poetries1.gitee.io/img-repo/2019/10/527.png" alt><br><img src="https://poetries1.gitee.io/img-repo/2019/10/528.png" alt></p>
<p><strong>如果是安卓5.0以下需要配置一下IP</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/529.png" alt></p>
<h3 id="1-2-安卓设备真机调试"><a href="#1-2-安卓设备真机调试" class="headerlink" title="1.2 安卓设备真机调试"></a>1.2 安卓设备真机调试</h3><p><strong>1. 开启 USB 调试</strong></p>
<blockquote>
<p>在默认情况下 <code>Android</code> 设备只能从应用市场来安装应用。你需要开启 <code>USB</code> 调试才能自由安装开发版本的 <code>APP</code></p>
</blockquote>
<p><strong>2. 通过 USB 数据线连接设备</strong></p>
<blockquote>
<p>下面检查你的设备是否能正确连接到 <code>ADB（Android Debug Bridge）</code>，使用<code>adb devices</code>命令：</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/530.png" alt></p>
<p><strong>3. 运行应用</strong></p>
<blockquote>
<p>现在你可以运行<code>react-native run-android</code>来在设备上安装并启动应用了</p>
</blockquote>
<p><strong>从设备上访问开发服务器</strong></p>
<ul>
<li>运行<code>adb reverse tcp:8081 tcp:8081</code></li>
<li>在命令行执行 <code>adb shell input keyevent 82</code>弹出开发者工具。打开热更新和远程调试</li>
</ul>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/531.png" alt></p>
<h3 id="1-3-移除vscode装饰器报错"><a href="#1-3-移除vscode装饰器报错" class="headerlink" title="1.3 移除vscode装饰器报错"></a>1.3 移除vscode装饰器报错</h3><blockquote>
<p>点击<code>Visual Studio Code</code>左下角的配置按钮。在搜索框内输入“experimentalDecorators”，发现竟然能够找到选项，如下</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&quot;javascript.implicitProjectConfig.experimentalDecorators&quot;: false</span><br></pre></td></tr></table></figure>
<p>试着将<code>false</code>改为<code>true</code>，重启<code>Visual Studio Code</code></p>
<blockquote>
<p><a href="https://blog.csdn.net/yiifaa/article/details/78862507" target="_blank" rel="noopener">https://blog.csdn.net/yiifaa/article/details/78862507</a></p>
</blockquote>
<h2 id="二、矢量图标的运用"><a href="#二、矢量图标的运用" class="headerlink" title="二、矢量图标的运用"></a>二、矢量图标的运用</h2><p><a href="https://github.com/oblador/react-native-vector-icons" target="_blank" rel="noopener">https://github.com/oblador/react-native-vector-icons</a></p>
<blockquote>
<p><code>react-native-vector-icons</code> 是可以直接使用图片名就能加载图片的第三方,类似于<code>web的 iconfont</code>矢量图，使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install react-native-vector-icons --save</span><br><span class="line">npm install rnpm -g</span><br></pre></td></tr></table></figure>
<h3 id="2-1-android平台"><a href="#2-1-android平台" class="headerlink" title="2.1 android平台"></a>2.1 android平台</h3><p><strong>1. 自动配置</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">react-native link react-native-vector-icons</span><br><span class="line"><span class="comment"># 或者</span></span><br><span class="line">npm install -g rnpm</span><br><span class="line">rnpm link react-native-vector-icons</span><br></pre></td></tr></table></figure>
<blockquote>
<p>会为你配置好所有，但是这是成功的情况下，你不需要操心任何事，但是往往不能如愿。如果你这步成功了，而且能够正常运行，下面这些你就可以跳过</p>
</blockquote>
<p><strong>2. 手动配置</strong></p>
<ul>
<li>第一步：复制字体文件（这一步千万不能忘记，不然就算运行成功你也看不到图标）</li>
</ul>
<blockquote>
<p>找到项目<code>node_modules/react-native-vector-icons/Fonts</code>，里面有很多已经内置的图标库字体文件，依照自己的需求，复制你需要的字体文件到 <code>android/app/src/main/assets/fonts</code>，（如果没有这个目录就自行创建）</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/532.png" alt></p>
<ul>
<li>第二步：配置 <code>android/settings.gradle</code></li>
</ul>
<p>在现有的代码基础上添加如下代码</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">include &apos;:react-native-vector-icons&apos;</span><br><span class="line">project(&apos;:react-native-vector-icons&apos;).projectDir = new File(rootProject.projectDir, &apos;../node_modules/react-native-vector-icons/android&apos;)</span><br></pre></td></tr></table></figure>
<ul>
<li>第三步：配置<code>android/app/build.gradle</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">dependencies &#123;</span><br><span class="line">    compile project(<span class="string">':react-native-vector-icons'</span>) <span class="comment">//添加</span></span><br><span class="line">    compile fileTree(dir: <span class="string">"libs"</span>, <span class="attr">include</span>: [<span class="string">"*.jar"</span>])</span><br><span class="line">    compile <span class="string">"com.android.support:appcompat-v7:23.0.1"</span></span><br><span class="line">    compile <span class="string">"com.facebook.react:react-native:+"</span>  <span class="comment">// From node_modules</span></span><br><span class="line">    compile project(<span class="string">':react-native-navigation'</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>第四步：配置 <code>android/app/src/main/java/com/xxxx/MainApplication.java</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> com.oblador.vectoricons.VectorIconsPackage;</span><br><span class="line">@Override</span><br><span class="line">  protected List&lt;ReactPackage&gt; getPackages() &#123;</span><br><span class="line">    <span class="keyword">return</span> Arrays.&lt;ReactPackage&gt;asList(</span><br><span class="line">      <span class="keyword">new</span> MainReactPackage()</span><br><span class="line">+   , <span class="keyword">new</span> VectorIconsPackage()</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>到这里配置就全部完成，接下来就可以在<code>rn</code>项目中使用<code>iconfont</code></p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/533.png" alt></p>
<h3 id="2-2-IOS平台"><a href="#2-2-IOS平台" class="headerlink" title="2.2 IOS平台"></a>2.2 IOS平台</h3><blockquote>
<p>打开你的<code>Xcode</code>项目工程，右键工程文件，选择<code>react</code>项目下的<code>node_modules/react-native-vector-icons/Fonts</code>文件</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/534.png" alt></p>
<p><strong>在xcode的Info.plist文件中,加入: Fonts provided by application数组</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/535.png" alt></p>
<blockquote>
<p>打开终端，输入：<code>rnpm link</code>，回车后会看到<code>Fonts provided by application</code>下加入如下字体</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/536.png" alt></p>
<blockquote>
<p>重新运行<code>react</code>项目，终端输入：<code>react-native run-ios</code>，可以看到效果了</p>
</blockquote>
<h2 id="三、react-native-router-flux的使用"><a href="#三、react-native-router-flux的使用" class="headerlink" title="三、react-native-router-flux的使用"></a>三、react-native-router-flux的使用</h2><blockquote>
<p><a href="https://github.com/aksonov/react-native-router-flux" target="_blank" rel="noopener">https://github.com/aksonov/react-native-router-flux</a></p>
</blockquote>
<h3 id="3-1-简介"><a href="#3-1-简介" class="headerlink" title="3.1 简介"></a>3.1 简介</h3><p><strong>特性</strong></p>
<blockquote>
<p><code>react-native-router-flux</code> 是一个路由包.在一个中心区域定义可切换<code>scene</code>模块。在使用过程中，跟<code>react-native</code>提供的<code>navigator</code>的区别是你不需要有<code>navigator</code>对象。你可以在任意地方使用简单的语法去控制<code>scene</code>的切换，如：<code>Actions.login({username, password})</code>  or <code>Actions.profile({profile})</code> or 甚至<code>Actions.profile(123)</code> ,其中<code>login</code> <code>profile</code>等是路由的<code>key</code>，通过调用<code>key</code>来切换路由</p>
</blockquote>
<ul>
<li>所有的参数将被注入到<code>this.props</code>中给<code>Sene</code>组件使用</li>
</ul>
<p><strong>功能和亮点</strong></p>
<ul>
<li>可定制的导航条：由<code>Scene</code>或者<code>Scene</code>的<code>state</code>去控制导航条的<code>show</code>／<code>hide</code></li>
<li>嵌套导航：每一个<code>tab</code>都可以有自己的导航，该导航被嵌套在<code>root</code>导航中</li>
<li>使用<code>Action sheet</code> 来自定义场景渲染器</li>
<li>动态路由：动态路由将允许你通过应用的<code>state</code>去选着哪个<code>scene</code>将被渲染</li>
<li><code>Reset History stack</code>重置历史栈：新的<code>reset</code> 类型将提供清除历史栈河消除导航的返回按钮的功能</li>
<li>更加强大的状态控制：在多个<code>scene</code>中可以有不同的<code>state</code></li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm i react-native-router-flux --save</span><br></pre></td></tr></table></figure>
<p><strong>使用方式一</strong></p>
<blockquote>
<p>在你的<code>src/index.js</code>级别的文件中使用<code>Scene</code>组件定义你的<code>scenes</code>，并且<code>Scene</code>组件作为<code>Router</code>的子节点。定义好的<code>Scene</code>将由<code>Router</code>来控制其行为</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;Scene, Router, Actions&#125; <span class="keyword">from</span> <span class="string">'react-native-router-flux'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123;Router, Scene&#125; <span class="keyword">from</span> <span class="string">"react-native-router-flux"</span>;</span><br><span class="line"><span class="keyword">import</span> PageOne <span class="keyword">from</span> <span class="string">"./Component/PageOne"</span>; </span><br><span class="line"><span class="keyword">import</span> PageTwo <span class="keyword">from</span> <span class="string">"./Component/PageTwo"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Root = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;Router&gt;</span><br><span class="line">      &#123;<span class="comment">/* 这种写法是将全部的跳转页面都放在Root下面 */</span>&#125;</span><br><span class="line">      &lt;Scene key=<span class="string">"root"</span>&gt;</span><br><span class="line">        &#123;<span class="comment">/* key 就是给页面的标签,供Actions使用 */</span>&#125;</span><br><span class="line">        &#123;<span class="comment">/* component 设置关联的页面 */</span>&#125;</span><br><span class="line">        &#123;<span class="comment">/* title 就是给页面标题 */</span>&#125;</span><br><span class="line">        &#123;<span class="comment">/* initial 就是设置默认页面*/</span>&#125;</span><br><span class="line">        &lt;Scene</span><br><span class="line">          key=<span class="string">"one"</span></span><br><span class="line">          component=&#123;PageOne&#125;</span><br><span class="line">          title=<span class="string">"PageOne"</span></span><br><span class="line">          initial=&#123;<span class="literal">true</span>&#125;</span><br><span class="line">        /&gt;</span><br><span class="line">        &lt;Scene key=<span class="string">"two"</span> component=&#123;PageTwo&#125; title=<span class="string">"PageTwo"</span> /&gt;</span><br><span class="line"></span><br><span class="line">      &lt;<span class="regexp">/Scene&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>Router&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><strong>第二种使用方式</strong></p>
<blockquote>
<p>你可以在编译期定义你所有的<code>scenes</code>，并在后面的<code>Router</code>里面使用</p>
</blockquote>
<figure class="highlight jsx"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;Actions, Scene, Router&#125; <span class="keyword">from</span> <span class="string">'react-native-router-flux'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> scenes = Actions.create(</span><br><span class="line">  &lt;Scene key=<span class="string">"root"</span>&gt;</span><br><span class="line">    &lt;Scene key=<span class="string">"login"</span> component=&#123;Login&#125; title=<span class="string">"Login"</span>/&gt;</span><br><span class="line">    &lt;Scene key=<span class="string">"register"</span> component=&#123;Register&#125; title=<span class="string">"Register"</span>/&gt;</span><br><span class="line">    &lt;Scene key=<span class="string">"home"</span> component=&#123;Home&#125;/&gt;</span><br><span class="line">  &lt;<span class="regexp">/Scene&gt;</span></span><br><span class="line"><span class="regexp">);</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span>* ... *<span class="regexp">/</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">class App extends React.Component &#123;</span></span><br><span class="line"><span class="regexp">  render() &#123;</span></span><br><span class="line"><span class="regexp">    return &lt;Router scenes=&#123;scenes&#125;/</span>&gt;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"> &#123;Actions, Scene, Router&#125; <span class="keyword">from</span> <span class="string">'react-native-router-flux'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> scenes = Actions.create(</span><br><span class="line">  &lt;Scene key=<span class="string">"root"</span>&gt;</span><br><span class="line">    &lt;Scene key=<span class="string">"login"</span> component=&#123;Login&#125; title=<span class="string">"Login"</span>/&gt;</span><br><span class="line">    &lt;Scene key=<span class="string">"register"</span> component=&#123;Register&#125; title=<span class="string">"Register"</span>/&gt;</span><br><span class="line">    &lt;Scene key=<span class="string">"home"</span> component=&#123;Home&#125;/&gt;</span><br><span class="line">  &lt;<span class="regexp">/Scene&gt;</span></span><br><span class="line"><span class="regexp">);</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span>* ... *<span class="regexp">/</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">class App extends React.Component &#123;</span></span><br><span class="line"><span class="regexp">  render() &#123;</span></span><br><span class="line"><span class="regexp">    return &lt;Router scenes=&#123;scenes&#125;/</span>&gt;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在任意地方通过导入</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;Actions&#125; <span class="keyword">from</span> <span class="string">'react-native-router-flux'</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>获得<code>Actions</code> 对象，<code>Actions</code>对象将是我们操作<code>Scenes</code>的遥控器。通过<code>Actions</code>我们可以向<code>Router</code>发出动作让<code>Router</code>控制<code>Scene</code>变化。</p>
</blockquote>
<ul>
<li>调用<code>Actions.ACTION_NAME(PARAMS)</code>可以展示一个<code>scene</code>，参数将被注入<code>scene</code>中<br>(如<code>Actions.login()</code>切换到登录页面)</li>
<li><code>Actions.pop()</code>方法将会弹出当前的<code>scene</code>，他接受如下可选参数 <ul>
<li><code>{popNum:[number]}</code>允许你去一次弹出多个<code>scene</code></li>
<li><code>{refresh:{...propsToSetOnPreviousScene}}</code>允许你去刷新<code>pop</code>后的<code>scene</code></li>
</ul>
</li>
<li><code>Actions.refresh(PARAMS)</code>会更新当前<code>scene</code>的属性</li>
</ul>
<h3 id="3-2-简单例子"><a href="#3-2-简单例子" class="headerlink" title="3.2 简单例子"></a>3.2 简单例子</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;Router, Scene&#125; <span class="keyword">from</span> <span class="string">"react-native-router-flux"</span>;</span><br><span class="line"><span class="keyword">import</span> PageOne <span class="keyword">from</span> <span class="string">"./Component/PageOne"</span>; </span><br><span class="line"><span class="keyword">import</span> PageTwo <span class="keyword">from</span> <span class="string">"./Component/PageTwo"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Root = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;Router&gt;</span><br><span class="line">      &#123;<span class="comment">/* 这种写法是将全部的跳转页面都放在Root下面 */</span>&#125;</span><br><span class="line">      &lt;Scene key=<span class="string">"root"</span>&gt;</span><br><span class="line">        &#123;<span class="comment">/* key 就是给页面的标签,供Actions使用 */</span>&#125;</span><br><span class="line">        &#123;<span class="comment">/* component 设置关联的页面 */</span>&#125;</span><br><span class="line">        &#123;<span class="comment">/* title 就是给页面标题 */</span>&#125;</span><br><span class="line">        &#123;<span class="comment">/* initial 就是设置默认页面*/</span>&#125;</span><br><span class="line">        &lt;Scene</span><br><span class="line">          key=<span class="string">"one"</span></span><br><span class="line">          component=&#123;PageOne&#125;</span><br><span class="line">          title=<span class="string">"PageOne"</span></span><br><span class="line">          initial=&#123;<span class="literal">true</span>&#125;</span><br><span class="line">        /&gt;</span><br><span class="line">        &lt;Scene key=<span class="string">"two"</span> component=&#123;PageTwo&#125; title=<span class="string">"PageTwo"</span> /&gt;</span><br><span class="line"></span><br><span class="line">      &lt;<span class="regexp">/Scene&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>Router&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// PageOne 的核心代码，点击 Text 跳转到下一个页面</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//导入Action的包,处理页面跳转</span></span><br><span class="line"><span class="keyword">import</span> &#123; Actions &#125; <span class="keyword">from</span> <span class="string">'react-native-router-flux'</span>; </span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> PageOne = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;View style=&#123;styles.container&#125;&gt;</span><br><span class="line">      &lt;Text style=&#123;styles.welcome&#125;</span><br><span class="line">        onPress=&#123;()=&gt;Actions.two()&#125; &gt;</span><br><span class="line">        我是Page One</span><br><span class="line">      &lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/</span>View&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// PageTwo 的核心代码</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">PageTwo</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    render() &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;View style=&#123;styles.container&#125;&gt;</span><br><span class="line">                &lt;Text style=&#123;styles.welcome&#125;&gt;我是Page Two &lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">            &lt;/</span>View&gt;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>运行就可以看到下面的效果：</p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/537.png" alt></p>
<p>简单就完成了两个页面之间的切换</p>
<p><strong>每一个<code>Scene component</code> 有如下属性</strong></p>
<ul>
<li><code>key</code>：一个唯一的字符串，用来标识一个<code>Scene</code>，可以理解为<code>scene</code>的一个身份牌号码</li>
<li><code>component</code>：当切换到该<code>scene</code>时，<code>component</code>属性引用的组件将被渲染出来</li>
<li><code>title</code>：当切换到对应的<code>scene</code>时，屏幕顶部的导航条中间将显示该<code>title</code></li>
<li><code>initial={true}</code> 表示默认为初始化<code>scene</code></li>
</ul>
<blockquote>
<p>在<code>pageOne</code>中有一个<code>Text</code>组件，当点击<code>onPress</code>方法，该方法将调用<code>Actions.pageTwo</code></p>
</blockquote>
<ul>
<li>会调用<code>Actions.SCENE_KEY(PARAMS)</code>,<code>SCENE_KEY</code>即为之前定义的<code>key</code>值，参数为可选的</li>
<li>我们的<code>Actions</code>就会通知<code>Router</code>，把<code>key=pageTwo</code>的<code>Scene</code>显示出来，如果传有参数的话，参数也会传入<code>Scene</code>组件中</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">const</span> goToPageTwo = <span class="function"><span class="params">()</span> =&gt;</span> Actions.pageTwo(&#123;<span class="attr">text</span>: <span class="string">'Hello World!'</span>&#125;); </span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    </span><br><span class="line">      This is PageOne!</span><br><span class="line">    </span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>我们传递一个参数名为<code>text</code> 。值为<code>Hello World</code>！如下所示，我们就可以在<code>key=pageTwo</code>的<code>scene</code>的<code>component</code>属性置顶的组件中通过<code>props</code>获取该参数值</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    </span><br><span class="line">      This is PageTwo!</span><br><span class="line">      &#123;<span class="keyword">this</span>.props.text&#125;</span><br><span class="line">    </span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>我们从<code>pageOne</code>跳转到了<code>pageTwo</code>，如果我们想跳回<code>pageOne</code>怎么办呢</p>
</blockquote>
<ul>
<li>官方提供的导航栏早已提供了一个<code>back icon</code>，我们也可以通过调用<code>Actions.pop()</code>方法将当前<code>scene</code>弹出栈，我们的<code>pageOne</code>就在栈顶了，此时显示的就是<code>pageOne</code>了，如果跳回来后我们需要刷新当前<code>scene</code>，我们可以调用<code>Actions.refresh(PARAMS)</code></li>
</ul>
<p><strong>数据传递与刷新</strong></p>
<blockquote>
<p>页面之间的切换自然不会缺少数据的传递，而且这个路由框架可以实时 <code>refresh</code> 当前页面</p>
</blockquote>
<ul>
<li>先看页面之间传递数据吧，这里添加一个 <code>PageThree</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;Actions&#125; <span class="keyword">from</span> <span class="string">"react-native-router-flux"</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> PageThree = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        &lt;View style=&#123;styles.container&#125;&gt;</span><br><span class="line">            &lt;Text style=&#123;styles.welcome&#125;</span><br><span class="line">                <span class="comment">//Actions.pop是退回到上一层</span></span><br><span class="line">                  onPress=&#123;() =&gt; Actions.pop(&#123;</span><br><span class="line">                      <span class="comment">//refresh用于刷新数据</span></span><br><span class="line">                      refresh: &#123;</span><br><span class="line">                          data: <span class="string">'从 three 回到 two'</span></span><br><span class="line">                      &#125;</span><br><span class="line">                  &#125;)&#125;&gt;我是Page Three &lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>View&gt;</span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><code>PageTwo</code> 也要修改一下代码</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;Actions&#125; <span class="keyword">from</span> <span class="string">'react-native-router-flux'</span>; <span class="comment">// New code</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">PageTwo</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    render() &#123;</span><br><span class="line">        <span class="keyword">const</span> data = <span class="keyword">this</span>.props.data || <span class="string">"null"</span>;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;View style=&#123;styles.container&#125;&gt;</span><br><span class="line">                &lt;Text style=&#123;styles.welcome&#125;</span><br><span class="line">                     <span class="comment">//添加点击事件并传递数据到PageThree</span></span><br><span class="line">                      onPress=&#123;() =&gt; Actions.three(&#123;<span class="attr">data</span>: <span class="string">"从 two 传递到 three"</span>&#125;)&#125;</span><br><span class="line">                &gt;我是Page Two &lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">               &lt;Text style=&#123;styles.refresh&#125;</span></span><br><span class="line"><span class="regexp">                /</span><span class="regexp">/展示从PageThree传回来的数据</span></span><br><span class="line"><span class="regexp">                &gt; refresh:&#123;data&#125;&lt;/</span>Text&gt;</span><br><span class="line">            &lt;<span class="regexp">/View&gt;)</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>最后到 <code>Root.js</code> 添加新的 <code>Scence</code></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Root = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        &lt;Router&gt;</span><br><span class="line">               <span class="comment">//...........</span></span><br><span class="line">                &lt;Scene key=<span class="string">"three"</span></span><br><span class="line">                       component=&#123;PageThree&#125;</span><br><span class="line">                       title=<span class="string">"PageThree"</span>/&gt;</span><br><span class="line">            &lt;<span class="regexp">/Scene&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>Router&gt;</span><br><span class="line">    );</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>此时运行就可以看到页面数据传递的效果了</p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/538.png" alt></p>
<blockquote>
<p>可以看到从 <code>PageThree</code> 回到 <code>PageTwo</code> 数据传递并刷新页面的效果，不过如果需要实时刷新当前页面呢？这时就需要使用 <code>Actions.refresh</code> 方法了</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">PageTwo</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    render() &#123;</span><br><span class="line">        <span class="keyword">const</span> data = <span class="keyword">this</span>.props.data || <span class="string">"null"</span>;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            &lt;View style=&#123;styles.container&#125;&gt;</span><br><span class="line">                &lt;Text style=&#123;styles.welcome&#125;</span><br><span class="line">                      onPress=&#123;() =&gt; Actions.three(&#123;<span class="attr">data</span>: <span class="string">"从 two 传递到 three"</span>&#125;)&#125;</span><br><span class="line">                &gt;我是Page Two &lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">                &lt;Text style=&#123;styles.refresh&#125;</span></span><br><span class="line"><span class="regexp">                      onPress=&#123;() =&gt; Actions.refresh(&#123;</span></span><br><span class="line"><span class="regexp">                          data: 'Changed data',</span></span><br><span class="line"><span class="regexp">                      &#125;)&#125;</span></span><br><span class="line"><span class="regexp">                &gt; refresh:&#123;data&#125;&lt;/</span>Text&gt;</span><br><span class="line">            &lt;<span class="regexp">/View&gt;)</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<p><strong>Tab Scene</strong></p>
<blockquote>
<p>通过设置 <code>Scene</code> 属性的 <code>Tabs</code> 可以设置 <code>Tabs</code> 。这个也开发中经常用到的页面效果</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//设置tab选中时的字体颜色和标题</span></span><br><span class="line"><span class="keyword">const</span> TabIcon = <span class="function">(<span class="params">&#123;focused , title&#125;</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        &lt;Text style=&#123;&#123;<span class="attr">color</span>: focused  ? <span class="string">'blue'</span> : <span class="string">'black'</span>&#125;&#125;&gt;&#123;title&#125;&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">&#125;;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">const Root = () =&gt; &#123;</span></span><br><span class="line"><span class="regexp">    return (&lt;Router&gt;</span></span><br><span class="line"><span class="regexp">        &#123;/</span>*tabBarPosition设置tab是在top还是bottom *<span class="regexp">/&#125;</span></span><br><span class="line"><span class="regexp">        &lt;Scene hideNavBar tabBarPosition="bottom"&gt;</span></span><br><span class="line"><span class="regexp">            &lt;Tabs</span></span><br><span class="line"><span class="regexp">                key="tabbar"</span></span><br><span class="line"><span class="regexp">                swipeEnabled</span></span><br><span class="line"><span class="regexp">                wrap=&#123;false&#125;</span></span><br><span class="line"><span class="regexp">                /</span><span class="regexp">/ 是否显示标签栏文字</span></span><br><span class="line"><span class="regexp">                showLabel=&#123;false&#125;</span></span><br><span class="line"><span class="regexp">                tabBarStyle=&#123;&#123;backgroundColor: "#eee"&#125;&#125;</span></span><br><span class="line"><span class="regexp">                /</span><span class="regexp">/tab选中的颜色</span></span><br><span class="line"><span class="regexp">                activeBackgroundColor="white"</span></span><br><span class="line"><span class="regexp">                /</span><span class="regexp">/tab没选中的颜色</span></span><br><span class="line"><span class="regexp">                inactiveBackgroundColor="red"</span></span><br><span class="line"><span class="regexp">            &gt;</span></span><br><span class="line"><span class="regexp">                &lt;Scene</span></span><br><span class="line"><span class="regexp">                    key="one"</span></span><br><span class="line"><span class="regexp">                    icon=&#123;TabIcon&#125;</span></span><br><span class="line"><span class="regexp">                    component=&#123;PageOne&#125;</span></span><br><span class="line"><span class="regexp">                    title="PageOne"</span></span><br><span class="line"><span class="regexp">                /</span>&gt;</span><br><span class="line"></span><br><span class="line">                &lt;Scene</span><br><span class="line">                    key=<span class="string">"two"</span></span><br><span class="line">                    component=&#123;PageTwo&#125;</span><br><span class="line">                    title=<span class="string">"PageTwo"</span></span><br><span class="line">                    icon=&#123;TabIcon&#125;</span><br><span class="line">                /&gt;</span><br><span class="line"></span><br><span class="line">                &lt;Scene</span><br><span class="line">                    key=<span class="string">"three"</span></span><br><span class="line">                    component=&#123;PageThree&#125;</span><br><span class="line">                    title=<span class="string">"PageThree"</span></span><br><span class="line">                    icon=&#123;TabIcon&#125;</span><br><span class="line">                /&gt;</span><br><span class="line">            &lt;<span class="regexp">/Tabs&gt;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>Scene&gt;</span><br><span class="line">    &lt;<span class="regexp">/Router&gt;)</span></span><br><span class="line"><span class="regexp">&#125;;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/539.png" alt></p>
<h3 id="3-3-react-native-router-flux之API"><a href="#3-3-react-native-router-flux之API" class="headerlink" title="3.3 react-native-router-flux之API"></a>3.3 react-native-router-flux之API</h3><blockquote>
<p>英文版：<a href="https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md" target="_blank" rel="noopener">https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md</a></p>
</blockquote>
<h4 id="3-3-1-Router"><a href="#3-3-1-Router" class="headerlink" title="3.3.1 Router"></a>3.3.1 Router</h4><table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>children</code></td>
<td></td>
<td><code>required</code></td>
<td>页面根组件</td>
</tr>
<tr>
<td><code>wrapBy</code></td>
<td><code>Function</code></td>
<td></td>
<td>允许集成诸如<code>Redux</code>（<code>connect</code>）和<code>Mobx</code>（<code>observer</code>）之类的状态管理方案</td>
</tr>
<tr>
<td><code>sceneStyle</code></td>
<td><code>Style</code></td>
<td></td>
<td>适用于所有场景的<code>Style</code>（可选）</td>
</tr>
<tr>
<td><code>backAndroidHandler</code></td>
<td><code>Function</code></td>
<td></td>
<td>允许在<code>Android</code>中自定义控制返回按钮（可选）</td>
</tr>
</tbody>
</table>
<p><strong>backAndroidHandler用法</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> onBackPress = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (Actions.state.index !== <span class="number">0</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">    Actions.pop()</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">backAndroidHandler=&#123;onBackPress&#125;</span><br></pre></td></tr></table></figure>
<h4 id="3-3-2-Scene"><a href="#3-3-2-Scene" class="headerlink" title="3.3.2 Scene"></a>3.3.2 Scene</h4><blockquote>
<p>此路由器的最重要的组件， 所有 <code>&lt;Scene&gt;</code> 组件必须要有一个唯一的 <code>key</code>。父节点<code>&lt;Scene&gt;</code>不能将<code>component</code>作为<code>prop</code>，因为它将作为其子节点的组件</p>
</blockquote>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>key</code></td>
<td><code>string</code></td>
<td><code>required</code></td>
<td>将用于标识页面，例如<code>Actions.name(params)</code>。必须是独一无二的</td>
</tr>
<tr>
<td><code>path</code></td>
<td><code>string</code></td>
<td></td>
<td>将被用来匹配传入的深层链接和传递参数，例如：<code>/user/:id/</code>将从<code>/user/1234/</code>用<code>params {id：1234}</code>调用场景的操作。接受<code>uri</code>的模板标准</td>
</tr>
<tr>
<td><code>component</code></td>
<td><code>React.Component</code></td>
<td><code>semi-required</code></td>
<td>要显示的组件，定义嵌套时不需要<code>Scene</code>。</td>
</tr>
<tr>
<td><code>back</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>如果是<code>true</code>，则显示后退按钮，而不是由上层容器定义的左侧<code>/drawer</code>按钮</td>
</tr>
<tr>
<td><code>backButtonImage</code></td>
<td><code>string</code></td>
<td></td>
<td>设置返回按钮的图片</td>
</tr>
<tr>
<td><code>backButtonTintColor</code></td>
<td><code>string</code></td>
<td></td>
<td>自定义后退按钮色调</td>
</tr>
<tr>
<td><code>init</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>如果是<code>true</code>后退按钮不会显示</td>
</tr>
<tr>
<td><code>clone</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>标有<code>clone</code>的场景将被视为模板，并在被推送时克隆到当前场景的父节点中</td>
</tr>
<tr>
<td><code>contentComponent</code></td>
<td><code>React.Component</code></td>
<td></td>
<td>用于呈现抽屉内容的组件（例如导航）</td>
</tr>
<tr>
<td><code>drawer</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>载入<code>DrawerNavigator</code>内的子页面</td>
</tr>
<tr>
<td><code>failure</code></td>
<td><code>Function</code></td>
<td></td>
<td>如果<code>on</code>返回一个<code>“falsey”</code>值，那么<code>failure</code>将被调用</td>
</tr>
<tr>
<td><code>backTitle</code></td>
<td><code>string</code></td>
<td></td>
<td>指定场景的后退按钮标题</td>
</tr>
<tr>
<td><code>backButtonTextStyle</code></td>
<td><code>Style</code></td>
<td></td>
<td>用于返回按钮文本的样式</td>
</tr>
<tr>
<td><code>rightTitle</code></td>
<td><code>string</code></td>
<td></td>
<td>为场景指定右侧的按钮标题</td>
</tr>
<tr>
<td><code>headerMode</code></td>
<td><code>string</code></td>
<td><code>float</code></td>
<td>指定标题应该如何呈现：（<code>float</code>渲染单个标题，保持在顶部，动画随着屏幕的变化，这是<code>iOS</code>上的常见样式。）<code>screen</code>（每个屏幕都有一个标题，并且标题淡入，与屏幕一起出现，这是<code>Android</code>上的常见模式）如果为<code>none</code>（不会显示标题）</td>
</tr>
<tr>
<td><code>hideNavBar</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>隐藏导航栏</td>
</tr>
<tr>
<td><code>hideTabBar</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>隐藏标签栏（仅适用于拥有<code>tabs</code>指定的场景）</td>
</tr>
<tr>
<td><code>hideBackImage</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>隐藏返回图片</td>
</tr>
<tr>
<td><code>initial</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>设置为<code>true</code>后，会默认显示该页面</td>
</tr>
<tr>
<td><code>leftButtonImage</code></td>
<td><code>Image</code></td>
<td></td>
<td>替换左侧按钮图片</td>
</tr>
<tr>
<td><code>leftButtonTextStyle</code></td>
<td><code>Style</code></td>
<td></td>
<td>左侧按钮的文字样式</td>
</tr>
<tr>
<td><code>leftButtonStyle</code></td>
<td><code>Style</code></td>
<td></td>
<td>左侧按钮的样式</td>
</tr>
<tr>
<td><code>leftButtonIconStyle</code></td>
<td><code>Style</code></td>
<td></td>
<td>左侧按钮的图标样式</td>
</tr>
<tr>
<td><code>modal</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>将场景容器定义为<code>modal</code>，即所有子场景都将从底部弹起到顶部。它仅适用于<code>containers</code>（与<code>v3</code>版本的语法不同）</td>
</tr>
<tr>
<td><code>navBar</code></td>
<td><code>React.Component</code></td>
<td></td>
<td>可以使用自定义的<code>React</code>组件来定义导航栏</td>
</tr>
<tr>
<td><code>navBarButtonColor</code></td>
<td><code>string</code></td>
<td></td>
<td>设置导航栏返回按钮的颜色</td>
</tr>
<tr>
<td><code>navigationBarStyle</code></td>
<td><code>Style</code></td>
<td></td>
<td>导航栏的样式</td>
</tr>
<tr>
<td><code>navigationBarTitleImage</code></td>
<td><code>Object</code></td>
<td></td>
<td>导航栏中的图像中覆盖<code>title</code>的<code>Image</code></td>
</tr>
<tr>
<td><code>navigationBarTitleImageStyle</code></td>
<td><code>object</code></td>
<td></td>
<td><code>navigationBarTitleImage</code>的样式</td>
</tr>
<tr>
<td><code>navTransparent</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>导航栏是否透明</td>
</tr>
<tr>
<td><code>on</code></td>
<td><code>Function</code></td>
<td></td>
<td>又名 <code>onEnter</code></td>
</tr>
<tr>
<td><code>onEnter</code></td>
<td><code>Function</code></td>
<td></td>
<td>当Scene要被跳转时调用。props将被作为参数提供。只支持定义了<code>component</code>的场景。</td>
</tr>
<tr>
<td><code>onExit</code></td>
<td><code>Function</code></td>
<td></td>
<td>当<code>Scene</code>要跳转离开时调用。只支持定义了<code>component</code>的场景</td>
</tr>
<tr>
<td><code>onLeft</code></td>
<td><code>Function</code></td>
<td></td>
<td>当导航栏左侧按钮被点击时调用</td>
</tr>
<tr>
<td><code>onRight</code></td>
<td><code>Function</code></td>
<td></td>
<td>当导航栏右侧按钮被点击时调用</td>
</tr>
<tr>
<td><code>renderTitle</code></td>
<td><code>React.Component</code></td>
<td></td>
<td>使用<code>React</code>组件显示导航栏的<code>title</code></td>
</tr>
<tr>
<td><code>renderLeftButton</code></td>
<td><code>React.Component</code></td>
<td></td>
<td>使用<code>React</code>组件显示导航栏的左侧按钮</td>
</tr>
<tr>
<td><code>renderRightButton</code></td>
<td><code>React.Component</code></td>
<td></td>
<td>使用<code>React</code>组件显示导航栏的右侧按钮</td>
</tr>
<tr>
<td><code>renderBackButton</code></td>
<td><code>React.Component</code></td>
<td></td>
<td>使用<code>React</code>组件显示导航栏的返回按钮</td>
</tr>
<tr>
<td><code>rightButtonTextStyle</code></td>
<td><code>Style</code></td>
<td></td>
<td>右侧按钮文字的样式</td>
</tr>
<tr>
<td><code>success</code></td>
<td><code>Function</code></td>
<td></td>
<td>如<code>on</code>返回一个”真实”的值，那么<code>success</code>将被调用</td>
</tr>
<tr>
<td><code>tabs</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>将子场景加载为<code>TabNavigator</code>。其他标签导航器属性也是适用</td>
</tr>
<tr>
<td><code>title</code></td>
<td><code>string</code></td>
<td></td>
<td>要显示在导航栏中心的文本</td>
</tr>
<tr>
<td><code>titleStyle</code></td>
<td><code>Style</code></td>
<td></td>
<td><code>title</code>的样式</td>
</tr>
<tr>
<td><code>type</code></td>
<td><code>string</code></td>
<td><code>push</code></td>
<td>可选的导航操作。你可以使用<code>replace</code>来替换此场景中的当前场景</td>
</tr>
</tbody>
</table>
<h4 id="3-3-3-Tabs-or"><a href="#3-3-3-Tabs-or" class="headerlink" title="3.3.3 Tabs ( or )"></a>3.3.3 Tabs (<tabs> or <scene tabs>)</scene></tabs></h4><p>标签栏组件</p>
<blockquote>
<p>你可以使用<code>&lt;Scene&gt;</code>中的所有<code>props</code>来作为<code>&lt;Tabs&gt;</code>的属性。 如果要使用该组件需要设置 <code>&lt;Scene tabs={true}&gt;</code></p>
</blockquote>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>wrap</code></td>
<td><code>boolean</code></td>
<td><code>true</code></td>
<td>自动使用自己的导航栏包装每个场景（如果不是另一个容器）。</td>
</tr>
<tr>
<td><code>activeBackgroundColor</code></td>
<td><code>string</code></td>
<td></td>
<td>指定焦点的选项卡的选中背景颜色</td>
</tr>
<tr>
<td><code>activeTintColor</code></td>
<td><code>string</code></td>
<td></td>
<td>指定标签栏图标的选中色调颜色</td>
</tr>
<tr>
<td><code>inactiveBackgroundColor</code></td>
<td><code>string</code></td>
<td></td>
<td>指定非焦点的选项卡的未选中背景颜色</td>
</tr>
<tr>
<td><code>inactiveTintColor</code></td>
<td><code>string</code></td>
<td></td>
<td>指定标签栏图标的未选中色调颜色</td>
</tr>
<tr>
<td><code>labelStyle</code></td>
<td><code>object</code></td>
<td></td>
<td>设置<code>tabbar</code>上文字的样式</td>
</tr>
<tr>
<td><code>lazy</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>在选项卡处于活动状态之前，不会渲染选项卡场景(推荐设置成<code>true</code>)</td>
</tr>
<tr>
<td><code>tabBarComponent</code></td>
<td><code>React.Component</code></td>
<td></td>
<td>使用<code>React</code>组件以自定义标签栏</td>
</tr>
<tr>
<td><code>tabBarPosition</code></td>
<td><code>string</code></td>
<td></td>
<td>指定标签栏位置。<code>iOS</code>上默认为<code>bottom</code>，安卓上是<code>top</code></td>
</tr>
<tr>
<td><code>tabBarStyle</code></td>
<td><code>object</code></td>
<td></td>
<td>标签栏样式</td>
</tr>
<tr>
<td><code>tabStyle</code></td>
<td><code>object</code></td>
<td></td>
<td>单个选项卡的样式</td>
</tr>
<tr>
<td><code>showLabel</code></td>
<td><code>boolean</code></td>
<td><code>true</code></td>
<td>是否显示标签栏文字</td>
</tr>
<tr>
<td><code>swipeEnabled</code></td>
<td><code>boolean</code></td>
<td>true`</td>
<td>是否可以滑动选项卡</td>
</tr>
<tr>
<td><code>animationEnabled</code></td>
<td><code>boolean</code></td>
<td><code>true</code></td>
<td>切换动画</td>
</tr>
<tr>
<td><code>tabBarOnPress</code></td>
<td><code>function</code></td>
<td></td>
<td>自定义<code>tabbar</code>点击事件</td>
</tr>
<tr>
<td><code>backToInitial</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>如果选项卡图标被点击，返回到默认选项卡</td>
</tr>
</tbody>
</table>
<h4 id="3-3-4-Stack"><a href="#3-3-4-Stack" class="headerlink" title="3.3.4 Stack ()"></a>3.3.4 Stack (<stack>)</stack></h4><blockquote>
<p>将场景组合在一起的组件，用于自己的基于堆栈实现的导航。使用它将为此堆栈创建一个单独的<code>navigator</code>，因此，除非您添加<code>hideNavBar</code>，否则将会出现两个导航条</p>
</blockquote>
<h4 id="3-3-5-Tab-Scene-child-within-Tabs"><a href="#3-3-5-Tab-Scene-child-within-Tabs" class="headerlink" title="3.3.5 Tab Scene (child  within Tabs)"></a>3.3.5 Tab Scene (child <scene> within Tabs)</scene></h4><blockquote>
<p>用于实现<code>Tabs</code>的效果展示，可以自定义<code>icon</code>和<code>label</code></p>
</blockquote>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>icon</code></td>
<td><code>component</code></td>
<td><code>undefined</code></td>
<td>作为选项卡图标放置的<code>RN</code>组件</td>
</tr>
<tr>
<td><code>tabBarLabel</code></td>
<td><code>string</code></td>
<td></td>
<td><code>tabbar</code>上的文字</td>
</tr>
</tbody>
</table>
<h4 id="3-3-6-Drawer-or"><a href="#3-3-6-Drawer-or" class="headerlink" title="3.3.6 Drawer ( or )"></a>3.3.6 Drawer (<drawer> or <scene drawer>)</scene></drawer></h4><blockquote>
<p>用于实现抽屉的效果，如果要使用该组件需要设置 <code>&lt;drawer tabs={true}&gt;</code>。</p>
</blockquote>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>drawerImage</code></td>
<td><code>Image</code></td>
<td></td>
<td>替换抽屉<code>hamburger</code>图标，你必须把它与<code>drawer</code>一起设置</td>
</tr>
<tr>
<td><code>drawerIcon</code></td>
<td><code>React.Component</code></td>
<td></td>
<td>用于抽屉<code>hamburger</code>图标的任意组件，您必须将其与<code>drawer</code>道具一起设置</td>
</tr>
<tr>
<td><code>hideDrawerButton</code></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>是否显示<code>drawerImage</code>或者<code>drawerIcon</code></td>
</tr>
<tr>
<td><code>drawerPosition</code></td>
<td><code>string</code></td>
<td></td>
<td>抽屉是在右边还是左边。可选属性r<code>ight</code>或<code>left</code></td>
</tr>
<tr>
<td><code>drawerWidth</code></td>
<td><code>number</code></td>
<td></td>
<td>抽屉的宽度（以像素为单位）（可选）</td>
</tr>
</tbody>
</table>
<h4 id="3-3-7-Modals-or"><a href="#3-3-7-Modals-or" class="headerlink" title="3.3.7 Modals ( or )"></a>3.3.7 Modals (<modal> or <scene modal>)</scene></modal></h4><blockquote>
<p>想要实现模态，您必须将其<code>&lt;Modal&gt;</code>作为您<code>Router</code>的根场景。在<code>Modal</code>将正常呈现第一个场景（应该是你真正的根场景），它将渲染第一个元素作为正常场景，其他所有元素作为弹出窗口（当它们 被<code>push</code>）</p>
</blockquote>
<p>示例：在下面的示例中，<code>root</code>场景嵌套在<code>&lt;Modal&gt;</code>中，因为它是第一个嵌套<code>Scene</code>，所以它将正常呈现。如果要<code>push</code>到<code>statusModal</code>，<code>errorModal</code>或者<code>loginModal</code>，他们将呈现为<code>Modal</code>，默认情况下会从屏幕底部向上弹出。重要的是要注意，目前<code>Modal</code>不允许透明的背景。</p>
<figure class="highlight jsx"><table><tr><td class="code"><pre><span class="line"><span class="comment">//... import components</span></span><br><span class="line">&lt;Router&gt;</span><br><span class="line">  &lt;Modal&gt;</span><br><span class="line">    &lt;Scene key=<span class="string">"root"</span>&gt;</span><br><span class="line">      &lt;Scene key=<span class="string">"screen1"</span> initial=&#123;<span class="literal">true</span>&#125; component=&#123;Screen1&#125; /&gt;</span><br><span class="line">      &lt;Scene key=<span class="string">"screen2"</span> component=&#123;Screen2&#125; /&gt;</span><br><span class="line">    &lt;<span class="regexp">/Scene&gt;</span></span><br><span class="line"><span class="regexp">    &lt;Scene key="statusModal" component=&#123;StatusModal&#125; /</span>&gt;</span><br><span class="line">    &lt;Scene key=<span class="string">"errorModal"</span> component=&#123;ErrorModal&#125; /&gt;</span><br><span class="line">    &lt;Scene key=<span class="string">"loginModal"</span> component=&#123;LoginModal&#125; /&gt;</span><br><span class="line">  &lt;<span class="regexp">/Modal&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>Router&gt;</span><br></pre></td></tr></table></figure>
<h4 id="3-3-8-Lightbox"><a href="#3-3-8-Lightbox" class="headerlink" title="3.3.8 Lightbox ()"></a>3.3.8 Lightbox (<lightbox>)</lightbox></h4><blockquote>
<p><code>Lightbox</code>是用于将组件渲染在当前组件上<code>Scene</code>的组件 。与<code>Modal</code>不同，它将允许调整大小和背景的透明度</p>
</blockquote>
<p>在下面的示例中，<code>root</code>场景嵌套在中<code>&lt;Lightbox&gt;</code>，因为它是第一个嵌套<code>Scene</code>，所以它将正常呈现。如果要<code>push</code>到<code>loginLightbox</code>，他们将呈现为<code>Lightbox</code>，默认情况下将放置在当前场景的顶部，允许透明的背景</p>
<figure class="highlight jsx"><table><tr><td class="code"><pre><span class="line"><span class="comment">//... import components</span></span><br><span class="line">&lt;Router&gt;</span><br><span class="line">  &lt;Lightbox&gt;</span><br><span class="line">    &lt;Scene key=<span class="string">"root"</span>&gt;</span><br><span class="line">      &lt;Scene key=<span class="string">"screen1"</span> initial=&#123;<span class="literal">true</span>&#125; component=&#123;Screen1&#125; /&gt;</span><br><span class="line">      &lt;Scene key=<span class="string">"screen2"</span> component=&#123;Screen2&#125; /&gt;</span><br><span class="line">    &lt;<span class="regexp">/Scene&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">    &#123;/</span>* Lightbox components will lay over the screen, allowing transparency*<span class="regexp">/&#125;</span></span><br><span class="line"><span class="regexp">    &lt;Scene key="loginLightbox" component=&#123;loginLightbox&#125; /</span>&gt;</span><br><span class="line">  &lt;<span class="regexp">/Lightbox&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>Router&gt;</span><br></pre></td></tr></table></figure>
<h4 id="3-3-9-Actions"><a href="#3-3-9-Actions" class="headerlink" title="3.3.9 Actions"></a>3.3.9 Actions</h4><ul>
<li>该对象的主要工具是为您的应用程序提供导航功能。 假设您的<code>Router</code>和<code>Scenes</code>配置正确，请使用下列属性在场景之间导航。 有些提供添加的功能，将<code>React</code>道具传递到导航场景</li>
<li>这些可以直接使用，例如，<code>Actions.pop()</code>将在源代码中实现的操作，或者，您可以在场景类型中设置这些常量，当您执行<code>Actions.main()</code>时，它将根据您的场景类型或默认值来执行动作</li>
</ul>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[key]</code></td>
<td><code>Function</code></td>
<td><code>Object</code></td>
<td><code>Actions</code>将’自动’使用路由器中的场景<code>key</code>进行导航。如果需要跳转页面，可以直接使用<code>Actions.key()</code>或<code>Actions[key].call()</code></td>
</tr>
<tr>
<td><code>currentScene</code></td>
<td><code>String</code></td>
<td></td>
<td>返回当前活动的场景</td>
</tr>
<tr>
<td><code>jump</code></td>
<td><code>Function</code></td>
<td><code>(sceneKey: String, props: Object)</code></td>
<td>用于切换到新选项卡. For Tabs only.</td>
</tr>
<tr>
<td><code>popTo</code></td>
<td><code>Function</code></td>
<td><code>(sceneKey: String, props: Object)</code></td>
<td>返回到指定的页面</td>
</tr>
<tr>
<td><code>push</code></td>
<td><code>Function</code></td>
<td><code>(sceneKey: String, props: Object)</code></td>
<td>跳转到新页面</td>
</tr>
<tr>
<td><code>refresh</code></td>
<td><code>Function</code></td>
<td><code>(props: Object)</code></td>
<td>重新加载当前页面</td>
</tr>
<tr>
<td><code>replace</code></td>
<td><code>Function</code></td>
<td><code>(sceneKey: String, props: Object)</code></td>
<td>从堆栈中弹出当前场景，并将新场景推送到导航堆栈。没有过度动画</td>
</tr>
<tr>
<td><code>reset</code></td>
<td><code>Function</code></td>
<td><code>(sceneKey: String, props: Object)</code></td>
<td>清除路由堆栈并将场景推入第一个索引. 没有过渡动画</td>
</tr>
<tr>
<td><code>drawerOpen</code></td>
<td><code>Function</code></td>
<td></td>
<td>如果可用，打开<code>Drawer</code></td>
</tr>
<tr>
<td><code>drawerClose</code></td>
<td><code>Function</code></td>
<td></td>
<td>如果可用，关闭<code>Drawer</code></td>
</tr>
</tbody>
</table>
<h4 id="3-3-10-ActionConst"><a href="#3-3-10-ActionConst" class="headerlink" title="3.3.10 ActionConst"></a>3.3.10 ActionConst</h4><blockquote>
<p>键入常量以确定<code>Scene</code>转换，这些是优先于手动键入其值，因为项目更新时可能会发生更改</p>
</blockquote>
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>ActionConst.JUMP</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_JUMP&#39;</code></td>
<td><code>jump</code></td>
</tr>
<tr>
<td><code>ActionConst.PUSH</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_PUSH&#39;</code></td>
<td>`push</td>
</tr>
<tr>
<td><code>ActionConst.PUSH_OR_POP</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_PUSH_OR_POP&#39;</code></td>
<td><code>push</code></td>
</tr>
<tr>
<td><code>ActionConst.REPLACE</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_REPLACE&#39;</code></td>
<td><code>replace</code></td>
</tr>
<tr>
<td><code>ActionConst.BACK</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_BACK&#39;</code></td>
<td><code>pop</code></td>
</tr>
<tr>
<td><code>ActionConst.BACK_ACTION</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_BACK_ACTION&#39;</code></td>
<td><code>pop</code></td>
</tr>
<tr>
<td><code>ActionConst.POP_TO</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_POP_TO&#39;</code></td>
<td><code>popTo</code></td>
</tr>
<tr>
<td><code>ActionConst.REFRESH</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_REFRESH&#39;</code></td>
<td><code>refresh</code></td>
</tr>
<tr>
<td><code>ActionConst.RESET</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_RESET&#39;</code></td>
<td><code>reset</code></td>
</tr>
<tr>
<td><code>ActionConst.FOCUS</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_FOCUS&#39;</code></td>
<td><code>N/A</code></td>
</tr>
<tr>
<td><code>ActionConst.BLUR</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_BLUR&#39;</code></td>
<td><code>N/A</code></td>
</tr>
<tr>
<td><code>ActionConst.ANDROID_BACK</code></td>
<td><code>string</code></td>
<td><code>&#39;REACT_NATIVE_ROUTER_FLUX_ANDROID_BACK&#39;</code></td>
<td><code>N/A</code></td>
</tr>
</tbody>
</table>
<h4 id="3-3-11-Universal-and-Deep-Linking"><a href="#3-3-11-Universal-and-Deep-Linking" class="headerlink" title="3.3.11 Universal and Deep Linking"></a>3.3.11 Universal and Deep Linking</h4><ul>
<li>考虑这样一个<code>web</code>应用程序和<code>app</code>配对,这可能有一个<code>urlhttps://thesocialnetwork.com/profile/1234/</code></li>
<li>如果我们同时构建一个<code>web</code>应用程序和一个移动应用程序，我们希望能够通过<code>path /profile/:id/</code></li>
<li>在web上，我们可能想要用一个路由器来打开我们的<code>&lt;Profile /&gt;</code>和参数<code>{ id: 1234 }</code></li>
<li>在移动设备上，如果我们正确地设置了<code>Android / iOS</code>环境来启动我们的应用程序并打开<code>RNRF&lt;Router /&gt;</code>,，那么我们还需要导航到我们的移动<code>&lt;Profile /&gt;</code>场景和参数<code>{ id: 1234 }</code></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">Router</span> <span class="attr">uriPrefix</span>=<span class="string">&#123;</span>'<span class="attr">thesocialnetwork.com</span>'&#125;&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">Scene</span> <span class="attr">key</span>=<span class="string">"root"</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">Scene</span> <span class="attr">key</span>=<span class="string">&#123;</span>'<span class="attr">home</span>'&#125; <span class="attr">component</span>=<span class="string">&#123;Home&#125;</span> /&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">Scene</span> <span class="attr">key</span>=<span class="string">&#123;</span>'<span class="attr">profile</span>'&#125; <span class="attr">path</span>=<span class="string">&#123;</span>"/<span class="attr">profile</span>/<span class="attr">:id</span>/"&#125; <span class="attr">component</span>=<span class="string">&#123;Profile&#125;</span> /&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">Scene</span> <span class="attr">key</span>=<span class="string">&#123;</span>'<span class="attr">profileForm</span>'&#125; <span class="attr">path</span>=<span class="string">&#123;</span>"/<span class="attr">edit</span>/<span class="attr">profile</span>/<span class="attr">:id</span>/"&#125; <span class="attr">component</span>=<span class="string">&#123;ProfileForm&#125;</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">Scene</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">Router</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>如果用户点击<code>http://thesocialnetwork.com/profile/1234/</code>在他们的设备,他们会打开<code>&lt;Router/ &gt;</code>,然后调用操作<code>Actions.profile({ id:1234 })</code></p>
</blockquote>
<h2 id="四、React-Native基础知识"><a href="#四、React-Native基础知识" class="headerlink" title="四、React Native基础知识"></a>四、React Native基础知识</h2><h3 id="4-1-常见组件"><a href="#4-1-常见组件" class="headerlink" title="4.1 常见组件"></a>4.1 常见组件</h3><ul>
<li><code>Image</code> 图片</li>
<li><code>Text</code> 文本</li>
<li><code>View</code> 包裹最外层</li>
</ul>
<h3 id="4-2-样式"><a href="#4-2-样式" class="headerlink" title="4.2 样式"></a>4.2 样式</h3><blockquote>
<p>实际开发中组件的样式会越来越复杂，我们建议使用<code>StyleSheet.create</code>来集中定义组件的样式</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppRegistry, StyleSheet, Text, View &#125; <span class="keyword">from</span> <span class="string">'react-native'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">LotsOfStyles</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;View&gt;</span><br><span class="line">        &lt;Text style=&#123;styles.red&#125;&gt;just red&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">        &lt;Text style=&#123;styles.bigblue&#125;&gt;just bigblue&lt;/</span>Text&gt;</span><br><span class="line">        &lt;Text style=&#123;[styles.bigblue, styles.red]&#125;&gt;bigblue, then red&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">        &lt;Text style=&#123;[styles.red, styles.bigblue]&#125;&gt;red, then bigblue&lt;/</span>Text&gt;</span><br><span class="line">      &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">const styles = StyleSheet.create(&#123;</span></span><br><span class="line"><span class="regexp">  bigblue: &#123;</span></span><br><span class="line"><span class="regexp">    color: 'blue',</span></span><br><span class="line"><span class="regexp">    fontWeight: 'bold',</span></span><br><span class="line"><span class="regexp">    fontSize: 30,</span></span><br><span class="line"><span class="regexp">  &#125;,</span></span><br><span class="line"><span class="regexp">  red: &#123;</span></span><br><span class="line"><span class="regexp">    color: 'red',</span></span><br><span class="line"><span class="regexp">  &#125;,</span></span><br><span class="line"><span class="regexp">&#125;);</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">AppRegistry.registerComponent('LotsOfStyles', () =&gt; LotsOfStyles);</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>常见的做法是按顺序声明和使用<code>style</code>属性，以借鉴<code>CSS</code>中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）</p>
</blockquote>
<h3 id="4-3-高度与宽度"><a href="#4-3-高度与宽度" class="headerlink" title="4.3 高度与宽度"></a>4.3 高度与宽度</h3><blockquote>
<p>最简单的给组件设定尺寸的方式就是在样式中指定固定的<code>widt</code>h和<code>height</code>。<code>React Native</code>中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppRegistry, View &#125; <span class="keyword">from</span> <span class="string">'react-native'</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">FixedDimensionsBasics</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;View&gt;</span><br><span class="line">        &lt;View style=&#123;&#123;<span class="attr">width</span>: <span class="number">50</span>, <span class="attr">height</span>: <span class="number">50</span>, <span class="attr">backgroundColor</span>: <span class="string">'powderblue'</span>&#125;&#125; /&gt;</span><br><span class="line">        &lt;View style=&#123;&#123;<span class="attr">width</span>: <span class="number">100</span>, <span class="attr">height</span>: <span class="number">100</span>, <span class="attr">backgroundColor</span>: <span class="string">'skyblue'</span>&#125;&#125; /&gt;</span><br><span class="line">        &lt;View style=&#123;&#123;<span class="attr">width</span>: <span class="number">150</span>, <span class="attr">height</span>: <span class="number">150</span>, <span class="attr">backgroundColor</span>: <span class="string">'steelblue'</span>&#125;&#125; /&gt;</span><br><span class="line">      &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;;</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 注册应用(registerComponent)后才能正确渲染</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/ 注意：只把应用作为一个整体注册一次，而不是每个组件/</span>模块都注册</span><br><span class="line">AppRegistry.registerComponent(<span class="string">'AwesomeProject'</span>, () =&gt; FixedDimensionsBasics);</span><br></pre></td></tr></table></figure>
<ul>
<li>在组件样式中使用<code>flex</code>可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用<code>flex:1</code>来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了<code>flex:1</code>，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的<code>flex</code>值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间<code>flex</code>值的比）</li>
<li>组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的<code>width</code>和<code>height</code>，也没有设定<code>flex</code>，则父容器的尺寸为零。其子组件如果使用了<code>flex</code>，也是无法显示的。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppRegistry, View &#125; <span class="keyword">from</span> <span class="string">'react-native'</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">FlexDimensionsBasics</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="comment">// 试试去掉父View中的`flex: 1`。</span></span><br><span class="line">      <span class="comment">// 则父View不再具有尺寸，因此子组件也无法再撑开。</span></span><br><span class="line">      <span class="comment">// 然后再用`height: 300`来代替父View的`flex: 1`试试看？</span></span><br><span class="line">      &lt;View style=&#123;&#123;<span class="attr">flex</span>: <span class="number">1</span>&#125;&#125;&gt;</span><br><span class="line">        &lt;View style=&#123;&#123;<span class="attr">flex</span>: <span class="number">1</span>, <span class="attr">backgroundColor</span>: <span class="string">'powderblue'</span>&#125;&#125; /&gt;</span><br><span class="line">        &lt;View style=&#123;&#123;<span class="attr">flex</span>: <span class="number">2</span>, <span class="attr">backgroundColor</span>: <span class="string">'skyblue'</span>&#125;&#125; /&gt;</span><br><span class="line">        &lt;View style=&#123;&#123;<span class="attr">flex</span>: <span class="number">3</span>, <span class="attr">backgroundColor</span>: <span class="string">'steelblue'</span>&#125;&#125; /&gt;</span><br><span class="line">      &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">AppRegistry.registerComponent('AwesomeProject', () =&gt; FlexDimensionsBasics);</span></span><br></pre></td></tr></table></figure>
<h3 id="4-4-处理文本输入"><a href="#4-4-处理文本输入" class="headerlink" title="4.4 处理文本输入"></a>4.4 处理文本输入</h3><blockquote>
<p><code>TextInput</code>是一个允许用户输入文本的基础组件。它有一个名为<code>onChangeText</code>的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为<code>onSubmitEditing</code>的属性，会在文本被提交后（用户按下软键盘上的提交键）调用</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppRegistry, Text, TextInput, View &#125; <span class="keyword">from</span> <span class="string">'react-native'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">PizzaTranslator</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props) &#123;</span><br><span class="line">    <span class="keyword">super</span>(props);</span><br><span class="line">    <span class="keyword">this</span>.state = &#123;<span class="attr">text</span>: <span class="string">''</span>&#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;View style=&#123;&#123;<span class="attr">padding</span>: <span class="number">10</span>&#125;&#125;&gt;</span><br><span class="line">        &lt;TextInput</span><br><span class="line">          style=&#123;&#123;<span class="attr">height</span>: <span class="number">40</span>&#125;&#125;</span><br><span class="line">          placeholder=<span class="string">"Type here to translate!"</span></span><br><span class="line">          onChangeText=&#123;(text) =&gt; <span class="keyword">this</span>.setState(&#123;text&#125;)&#125;</span><br><span class="line">        /&gt;</span><br><span class="line">        &lt;Text style=&#123;&#123;<span class="attr">padding</span>: <span class="number">10</span>, <span class="attr">fontSize</span>: <span class="number">42</span>&#125;&#125;&gt;</span><br><span class="line">          &#123;<span class="keyword">this</span>.state.text.split(<span class="string">' '</span>).map(<span class="function">(<span class="params">word</span>) =&gt;</span> word &amp;&amp; <span class="string">'🍕'</span>).join(<span class="string">' '</span>)&#125;</span><br><span class="line">        &lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">      &lt;/</span>View&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="4-5-如何使用滚动视图"><a href="#4-5-如何使用滚动视图" class="headerlink" title="4.5 如何使用滚动视图"></a>4.5 如何使用滚动视图</h3><blockquote>
<p><code>ScrollView</code>是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。<code>ScrollView</code>不仅可以垂直滚动，还能水平滚动（通过<code>horizontal</code>属性来设置）</p>
</blockquote>
<ul>
<li><code>ScrollView</code>适合用来显示数量不多的滚动元素。放置在<code>ScollView</code>中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的<code>ListView</code>组件</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span>&#123; ScrollView, Image, Text, View &#125; <span class="keyword">from</span> <span class="string">'react-native'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">IScrolledDownAndWhatHappenedNextShockedMe</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">      <span class="keyword">return</span>(</span><br><span class="line">        &lt;ScrollView&gt;</span><br><span class="line">          &lt;Text style=&#123;&#123;<span class="attr">fontSize</span>:<span class="number">96</span>&#125;&#125;&gt;Scroll me plz&lt;<span class="regexp">/Text&gt;</span></span><br><span class="line"><span class="regexp">          &lt;Image source=&#123;require('./img</span><span class="regexp">/favicon.png')&#125; /</span>&gt;</span><br><span class="line">          &lt;Image source=&#123;<span class="built_in">require</span>(<span class="string">'./img/favicon.png'</span>)&#125; /&gt;</span><br><span class="line">          &lt;Image source=&#123;<span class="built_in">require</span>(<span class="string">'./img/favicon.png'</span>)&#125; /&gt;</span><br><span class="line">        &lt;<span class="regexp">/ScrollView&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>
<h3 id="4-6-如何使用长列表"><a href="#4-6-如何使用长列表" class="headerlink" title="4.6 如何使用长列表"></a>4.6 如何使用长列表</h3><ul>
<li><code>FlatList</code>组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同</li>
<li><code>FlatList</code>更适于长列表数据，且元素个数可以增删。和<code>ScrollView</code>不同的是，<code>FlatList</code>并不立即渲染所有元素，而是优先渲染屏幕上可见的元素</li>
<li><code>FlatList</code>组件必须的两个属性是<code>data</code>和<code>renderItem</code>。<code>data</code>是列表的数据源，而<code>renderItem</code>则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; FlatList, StyleSheet, Text, View &#125; <span class="keyword">from</span> <span class="string">'react-native'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">FlatListBasics</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;View style=&#123;styles.container&#125;&gt;</span><br><span class="line">        &lt;FlatList</span><br><span class="line">          data=&#123;[</span><br><span class="line">            &#123;<span class="attr">key</span>: <span class="string">'Devin'</span>&#125;,</span><br><span class="line">            &#123;<span class="attr">key</span>: <span class="string">'Jackson'</span>&#125;,</span><br><span class="line">            &#123;<span class="attr">key</span>: <span class="string">'James'</span>&#125;,</span><br><span class="line">            &#123;<span class="attr">key</span>: <span class="string">'Joel'</span>&#125;,</span><br><span class="line">            &#123;<span class="attr">key</span>: <span class="string">'John'</span>&#125;,</span><br><span class="line">            &#123;<span class="attr">key</span>: <span class="string">'Jillian'</span>&#125;,</span><br><span class="line">            &#123;<span class="attr">key</span>: <span class="string">'Jimmy'</span>&#125;,</span><br><span class="line">            &#123;<span class="attr">key</span>: <span class="string">'Julie'</span>&#125;,</span><br><span class="line">          ]&#125;</span><br><span class="line">          renderItem=&#123;(&#123;item&#125;) =&gt; <span class="xml"><span class="tag">&lt;<span class="name">Text</span> <span class="attr">style</span>=<span class="string">&#123;styles.item&#125;</span>&gt;</span>&#123;item.key&#125;<span class="tag">&lt;/<span class="name">Text</span>&gt;</span></span>&#125;</span><br><span class="line">        /&gt;</span><br><span class="line">      &lt;<span class="regexp">/View&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">const styles = StyleSheet.create(&#123;</span></span><br><span class="line"><span class="regexp">  container: &#123;</span></span><br><span class="line"><span class="regexp">   flex: 1,</span></span><br><span class="line"><span class="regexp">   paddingTop: 22</span></span><br><span class="line"><span class="regexp">  &#125;,</span></span><br><span class="line"><span class="regexp">  item: &#123;</span></span><br><span class="line"><span class="regexp">    padding: 10,</span></span><br><span class="line"><span class="regexp">    fontSize: 18,</span></span><br><span class="line"><span class="regexp">    height: 44,</span></span><br><span class="line"><span class="regexp">  &#125;,</span></span><br><span class="line"><span class="regexp">&#125;)</span></span><br></pre></td></tr></table></figure>
<h3 id="4-7-网络"><a href="#4-7-网络" class="headerlink" title="4.7 网络"></a>4.7 网络</h3><blockquote>
<p>默认情况下，<code>iOS</code>会阻止所有非<code>https</code>的请求。如果你请求的接口是<code>http</code>协议，那么首先需要添加一个<code>App Transport Security</code>的例外</p>
</blockquote>
<h2 id="五、React-Native布局"><a href="#五、React-Native布局" class="headerlink" title="五、React Native布局"></a>五、React Native布局</h2><h3 id="5-1-宽和高"><a href="#5-1-宽和高" class="headerlink" title="5.1 宽和高"></a>5.1 宽和高</h3><ul>
<li>一个组件的高度和宽度决定了它在屏幕上的尺寸，也就是大小</li>
<li>在<code>React Native</code>中尺寸是没有单位的，它代表了设备独立像素</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">width:100</span>,<span class="attr">height:100</span>,<span class="attr">margin:40</span>,<span class="attr">backgroundColor:</span>'<span class="attr">gray</span>'&#125;&#125;&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">Text</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">fontSize:16</span>,<span class="attr">margin:20</span>&#125;&#125;&gt;</span>尺寸<span class="tag">&lt;/<span class="name">Text</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="5-2-和web中的差异"><a href="#5-2-和web中的差异" class="headerlink" title="5.2 和web中的差异"></a>5.2 和web中的差异</h3><blockquote>
<p><code>React Native</code>中的<code>FlexBox</code> 和<code>Web CSSS</code>上<code>FlexBox</code>的不同之处</p>
</blockquote>
<ul>
<li><code>flexDirection</code>:  <code>React Native</code>中默认为<code>flexDirection:&#39;column&#39;</code>，在<code>Web CSS</code>中默认为<code>flex-direction:&#39;row&#39;</code></li>
<li><code>alignItems</code>:  <code>React Native</code>中默认为<code>alignItems:&#39;stretch&#39;</code>，在<code>Web CSS</code>中默认<code>align-items:&#39;flex-start&#39;</code></li>
<li><code>flex</code>: 相比<code>Web CSS</code>的<code>flex</code>接受多参数，如:<code>flex: 2 2 10%</code>;，但在 <code>React Native</code>中<code>flex</code>只接受一个参数</li>
<li>不支持属性：<code>align-content</code>，<code>flex-basis</code>，<code>order</code>，<code>flex-basis</code>，<code>flex-flow</code>，<code>flex-grow</code>，<code>flex-shrink</code></li>
</ul>
<h3 id="5-3-Layout"><a href="#5-3-Layout" class="headerlink" title="5.3 Layout"></a>5.3 Layout</h3><blockquote>
<p>以下属性是<code>React Native</code>所支持的<code>Flex</code>属性</p>
</blockquote>
<h4 id="5-3-1-容器属性"><a href="#5-3-1-容器属性" class="headerlink" title="5.3.1 容器属性"></a>5.3.1 容器属性</h4><ul>
<li><code>flexDirection</code>: <code>row</code> <code>column</code> <code>row-reverse</code> <code>column-reverse</code></li>
<li><code>flexWrap</code>: <code>wrap</code> <code>nowrap</code> </li>
<li><code>justifyContent</code>: <code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code></li>
<li><code>alignItems</code>: <code>flex-start</code> <code>flex-end</code> <code>center</code> <code>stretch</code></li>
</ul>
<h4 id="5-3-2-横轴和竖轴"><a href="#5-3-2-横轴和竖轴" class="headerlink" title="5.3.2 横轴和竖轴"></a>5.3.2 横轴和竖轴</h4><blockquote>
<p>主轴即水平方向的轴线，可以理解成横轴，侧轴垂直于主轴，可以理解为竖轴</p>
</blockquote>
<p><img src="https://mdn.mozillademos.org/files/12998/flexbox.png" alt></p>
<h4 id="5-3-3-flexDirection"><a href="#5-3-3-flexDirection" class="headerlink" title="5.3.3 flexDirection"></a>5.3.3 flexDirection</h4><blockquote>
<ul>
<li><code>flexDirection</code>: <code>row</code> <code>column</code> <code>row-reverse</code> <code>column-reverse</code></li>
<li><code>flexDirection</code>属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式</li>
</ul>
</blockquote>
<ul>
<li><code>row</code>: 从左向右依次排列</li>
<li><code>row-reverse</code>: 从右向左依次排列</li>
<li><code>column(default)</code>: 默认的排列方式，从上向下排列</li>
<li><code>column-reverse</code>: 从下向上排列</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">flexDirection:</span>'<span class="attr">row-reverse</span>',<span class="attr">backgroundColor:</span>"<span class="attr">darkgray</span>",<span class="attr">marginTop:20</span>&#125;&#125;&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">width:40</span>,<span class="attr">height:40</span>,<span class="attr">backgroundColor:</span>"<span class="attr">darkcyan</span>",<span class="attr">margin:5</span>&#125;&#125;&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Text</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">fontSize:16</span>&#125;&#125;&gt;</span>1<span class="tag">&lt;/<span class="name">Text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">width:40</span>,<span class="attr">height:40</span>,<span class="attr">backgroundColor:</span>"<span class="attr">darkcyan</span>",<span class="attr">margin:5</span>&#125;&#125;&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Text</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">fontSize:16</span>&#125;&#125;&gt;</span>2<span class="tag">&lt;/<span class="name">Text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">width:40</span>,<span class="attr">height:40</span>,<span class="attr">backgroundColor:</span>"<span class="attr">darkcyan</span>",<span class="attr">margin:5</span>&#125;&#125;&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Text</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">fontSize:16</span>&#125;&#125;&gt;</span>3<span class="tag">&lt;/<span class="name">Text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">width:40</span>,<span class="attr">height:40</span>,<span class="attr">backgroundColor:</span>"<span class="attr">darkcyan</span>",<span class="attr">margin:5</span>&#125;&#125;&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Text</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">fontSize:16</span>&#125;&#125;&gt;</span>4<span class="tag">&lt;/<span class="name">Text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/flexDirection.jpg" alt></p>
<h4 id="5-3-4-flexWrap"><a href="#5-3-4-flexWrap" class="headerlink" title="5.3.4 flexWrap"></a>5.3.4 flexWrap</h4><blockquote>
<p><code>flexWrap</code>属性定义了子元素在父视图内是否允许多行排列，默认为<code>nowrap</code></p>
</blockquote>
<ul>
<li><code>nowrap flex</code>的元素只排列在一行上，可能导致溢出</li>
<li><code>wrap flex</code>的元素在一行排列不下时，就进行多行排列</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">View</span>  <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">flexWrap:</span>'<span class="attr">wrap</span>',<span class="attr">flexDirection:</span>'<span class="attr">row</span>',<span class="attr">backgroundColor:</span>"<span class="attr">darkgray</span>",<span class="attr">marginTop:20</span>&#125;&#125;&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/flexWrap.jpg" alt></p>
<h4 id="5-3-5-justifyContent"><a href="#5-3-5-justifyContent" class="headerlink" title="5.3.5 justifyContent"></a>5.3.5 justifyContent</h4><blockquote>
<ul>
<li><code>justifyContent</code>属性定义了浏览器如何分配顺着父容器主轴的弹性（<code>flex</code>）元素之间及其周围的空间，默认为<code>flex-start</code></li>
<li><code>justifyContent</code>: <code>flex-start</code> <code>flex-end</code> <code>center</code> <code>space-between</code> <code>space-around</code></li>
</ul>
</blockquote>
<ul>
<li><code>flex-start(default)</code>从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐</li>
<li><code>flex-end</code> 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。</li>
<li><code>center</code> 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。</li>
<li><code>space-between</code> 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。</li>
<li><code>space-around</code> 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">View</span>  <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">justifyContent:</span>'<span class="attr">center</span>',<span class="attr">flexDirection:</span>'<span class="attr">row</span>',<span class="attr">backgroundColor:</span>"<span class="attr">darkgray</span>",<span class="attr">marginTop:20</span>&#125;&#125;&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/justifyContent.jpg" alt></p>
<h4 id="5-3-6-alignItems"><a href="#5-3-6-alignItems" class="headerlink" title="5.3.6 alignItems"></a>5.3.6 alignItems</h4><blockquote>
<p><code>alignItems</code> 属性以与<code>justify-content</code>相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为<code>stretch</code>。</p>
</blockquote>
<ul>
<li><code>flex-start</code> 元素向侧轴起点对齐。</li>
<li><code>flex-end</code> 元素向侧轴终点对齐。</li>
<li><code>center</code> 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。</li>
<li><code>stretch</code> 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">View</span>  <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">justifyContent:</span>'<span class="attr">center</span>',<span class="attr">flexDirection:</span>'<span class="attr">row</span>',<span class="attr">backgroundColor:</span>"<span class="attr">darkgray</span>",<span class="attr">marginTop:20</span>&#125;&#125;&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/alignItems.jpg" alt></p>
<h4 id="5-3-7-alignSelf"><a href="#5-3-7-alignSelf" class="headerlink" title="5.3.7 alignSelf"></a>5.3.7 alignSelf</h4><blockquote>
<p><code>alignSelf</code>属性以属性定义了<code>flex</code>容器内被选中项目的对齐方式。注意：<code>alignSelf</code> 属性可重写灵活容器的 <code>alignItems</code> 属性</p>
</blockquote>
<ul>
<li><code>stretch</code> 元素被拉伸以适应容器。</li>
<li><code>center</code> 元素位于容器的中心。</li>
<li><code>flex-start</code> 元素位于容器的开头。</li>
<li><code>flex-end</code> 元素位于容器的结尾</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">alignSelf:</span>'<span class="attr">baseline</span>',<span class="attr">width:60</span>,<span class="attr">height:</span>    <span class="attr">20</span>,<span class="attr">backgroundColor:</span>"<span class="attr">darkcyan</span>",<span class="attr">margin:5</span>&#125;&#125;&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">Text</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">fontSize:16</span>&#125;&#125;&gt;</span>1<span class="tag">&lt;/<span class="name">Text</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/alignSelf.jpg" alt></p>
<h4 id="5-3-8-flex"><a href="#5-3-8-flex" class="headerlink" title="5.3.8 flex"></a>5.3.8 flex</h4><blockquote>
<p><code>flex</code> 属性定义了一个可伸缩元素的能力，默认为<code>0</code></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">flexDirection:</span>'<span class="attr">row</span>',<span class="attr">height:40</span>, <span class="attr">backgroundColor:</span>"<span class="attr">darkgray</span>",<span class="attr">marginTop:20</span>&#125;&#125;&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">flex:1</span>,<span class="attr">backgroundColor:</span>"<span class="attr">darkcyan</span>",<span class="attr">margin:5</span>&#125;&#125;&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Text</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">fontSize:16</span>&#125;&#125;&gt;</span>flex:1<span class="tag">&lt;/<span class="name">Text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">flex:2</span>,<span class="attr">backgroundColor:</span>"<span class="attr">darkcyan</span>",<span class="attr">margin:5</span>&#125;&#125;&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Text</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">fontSize:16</span>&#125;&#125;&gt;</span>flex:2<span class="tag">&lt;/<span class="name">Text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">flex:3</span>,<span class="attr">backgroundColor:</span>"<span class="attr">darkcyan</span>",<span class="attr">margin:5</span>&#125;&#125;&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Text</span> <span class="attr">style</span>=<span class="string">&#123;</span> &#123;<span class="attr">fontSize:16</span>&#125;&#125;&gt;</span>flex:3<span class="tag">&lt;/<span class="name">Text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">View</span>&gt;</span>          </span><br><span class="line"><span class="tag">&lt;/<span class="name">View</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/develop/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/images/flex.jpg" alt></p>
<h3 id="5-4-视图边框"><a href="#5-4-视图边框" class="headerlink" title="5.4 视图边框"></a>5.4 视图边框</h3><ul>
<li><code>borderBottomWidth number</code>  底部边框宽度</li>
<li><code>borderLeftWidth number</code> 左边框宽度</li>
<li><code>borderRightWidth number</code>  右边框宽度</li>
<li><code>borderTopWidth number</code> 顶部边框宽度</li>
<li><code>borderWidth number</code> 边框宽度</li>
<li><code>border&lt;Bottom|Left|Right|Top&gt;Color</code> 个方向边框的颜色</li>
<li><code>borderColor</code> 边框颜色</li>
</ul>
<h3 id="5-5-尺寸"><a href="#5-5-尺寸" class="headerlink" title="5.5 尺寸"></a>5.5 尺寸</h3><ul>
<li><code>width number</code></li>
<li><code>height number</code></li>
</ul>
<h3 id="5-6-外边距"><a href="#5-6-外边距" class="headerlink" title="5.6 外边距"></a>5.6 外边距</h3><ul>
<li><code>margin number</code> 外边距</li>
<li><code>marginBottom number</code> 下外边距</li>
<li><code>marginHorizontal number</code>  左右外边距</li>
<li><code>marginLeft number</code> 左外边距</li>
<li><code>marginRight number</code> 右外边距</li>
<li><code>marginTop number</code> 上外边距</li>
<li><code>marginVertical number</code> 上下外边距</li>
</ul>
<h3 id="5-7-内边距"><a href="#5-7-内边距" class="headerlink" title="5.7 内边距"></a>5.7 内边距</h3><ul>
<li><code>padding number</code> 内边距</li>
<li><code>paddingBottom number</code> 下内边距</li>
<li><code>paddingHorizontal number</code> 左右内边距</li>
<li><code>paddingLeft number</code> 做内边距</li>
<li><code>paddingRight number</code>  右内边距</li>
<li><code>paddingTop number</code>  上内边距</li>
<li><code>paddingVertical number</code>  上下内边距</li>
</ul>
<h3 id="5-8-边缘"><a href="#5-8-边缘" class="headerlink" title="5.8 边缘"></a>5.8 边缘</h3><ul>
<li><code>left number</code> 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。</li>
<li><code>right number</code> 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移</li>
<li><code>top number</code>  属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。</li>
<li><code>bottom number</code> 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。</li>
</ul>
<h3 id="5-9-定位-position"><a href="#5-9-定位-position" class="headerlink" title="5.9 定位(position)"></a>5.9 定位(position)</h3><blockquote>
<p><code>position:absolute|relative</code>属性设置元素的定位方式，为将要定位的元素定义定位规则。</p>
</blockquote>
<ul>
<li><code>absolute</code>：生成绝对定位的元素，元素的位置通过 “<code>left</code>“, “<code>top</code>“, “<code>right</code>“ 以及 “<code>bottom</code>“ 属性进行规定。</li>
<li><code>relative</code>：生成相对定位的元素，相对于其正常位置进行定位。因此，”<code>left:20</code>“ 会向元素的 <code>LEFT</code> 位置添加 <code>20</code> 像素。</li>
</ul>
<h2 id="六、React-Native适配"><a href="#六、React-Native适配" class="headerlink" title="六、React Native适配"></a>六、React Native适配</h2><h3 id="6-1-Platform-OS"><a href="#6-1-Platform-OS" class="headerlink" title="6.1 Platform.OS"></a>6.1 Platform.OS</h3><blockquote>
<p>为了提高代码的兼容性，我们有时需要判断当前系统的平台，然后做一些适配。比如，我们在使用<code>StatusBar</code>做导航栏的时候，在<code>iOS</code>平台下根视图的位置默认情况下是占据状态栏的位置的，我们通常希望状态栏下面能显示一个导航栏，所以我们需要为<code>StatusBar</code>的外部容器设置一个高度</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">View</span> <span class="attr">style</span>=<span class="string">&#123;&#123;height:</span> <span class="attr">Platform.OS</span> === <span class="string">'ios'</span> ? <span class="attr">20:0</span>&#125;&#125;&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">StatusBar</span> &#123;<span class="attr">...this.props.statusBar</span>&#125; /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">View</span>&gt;</span>;</span><br></pre></td></tr></table></figure>
<h3 id="6-2-留意api-doc的android或ios标识"><a href="#6-2-留意api-doc的android或ios标识" class="headerlink" title="6.2 留意api doc的android或ios标识"></a>6.2 留意api doc的android或ios标识</h3><blockquote>
<p>并不是所有<code>React Native</code>的一些<code>api</code>或组件的一些属性和方法都兼容<code>Android</code>和<code>iOS</code>，在<code>React Native</code>的<code>api doc</code>中通常会在一些属性或方法的前面加上<code>android</code>或<code>ios</code>的字样来标识该属性或方法所支持的平台，如</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">android renderToHardwareTextureAndroid bool</span><br><span class="line">ios shouldRasterizeIOS bool</span><br></pre></td></tr></table></figure>
<blockquote>
<p>在上述代码中，<code>renderToHardwareTextureAndroid bool</code>只支持<code>Android</code>平台，<code>ios shouldRasterizeIOS bool</code>只支持<code>iOS</code>平台，所有我们在使用这些带有标记的属性或方法的时候就需要考虑对于它们不兼容的平台我们是否需要做相应的适配了</p>
</blockquote>
<h3 id="6-3-组件选择"><a href="#6-3-组件选择" class="headerlink" title="6.3 组件选择"></a>6.3 组件选择</h3><blockquote>
<p>比如，我们要开发一款应用需要用到导航组件，<code>在React Native</code>组件中有<code>NavigatorIOS</code>与<code>Navigator</code>两个导航组件来供我们选择，从<code>api doc</code>中我们可以看出<code>NavigatorIOS</code>只支持<code>iOS</code>平台，<code>Navigator</code>则两个平台都支持。<br>所以如果我们要开发的应用需要适配<code>Android</code>和<code>iOS</code>，那么<code>Navigator</code>才是最佳的选择。</p>
</blockquote>
<p>为了提高代码的复用性与兼容性建议大家在选择<code>React Native</code>组件的时候要多留意该组件是不是兼容<code>Android</code>和<code>iOS</code>，尽量选择<code>Android</code>和<code>iOS</code>平台都兼容的组件。</p>
<h3 id="6-4-图片适配"><a href="#6-4-图片适配" class="headerlink" title="6.4 图片适配"></a>6.4 图片适配</h3><blockquote>
<p>开发一款应用少不了的需要用到图标。无论是<code>Android</code>还是<code>iOS</code>，现在不同分辨率的设备越来越多，我们希望这些图标能够适配不同分辨率的设备。为此我们需要为每个图标提供<code>1x</code>、<code>2x</code>、<code>3x</code>三种大小的尺寸<code>，React Native</code>会根据屏幕的分辨率来动态的选择显示不同尺寸的图片。比如：在<code>img</code>目录下有如下三种尺寸的<code>check.png</code></p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">└── img</span><br><span class="line">    ├── check.png</span><br><span class="line">    ├── check@2x.png</span><br><span class="line">    └── check@3x.png</span><br></pre></td></tr></table></figure>
<p>那么我们就可以通过下面的方式来使用<code>check.png</code></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">Image</span> <span class="attr">source</span>=<span class="string">&#123;require(</span>'<span class="attr">.</span>/<span class="attr">img</span>/<span class="attr">check.png</span>')&#125; /&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>提示：我们在使用具有不同分辨率的图标时，一定要引用标准分辨率的图片如<code>require(&#39;./img/check.png&#39;)</code>，如果我们这样写<code>require(&#39;./img/check@2x.png&#39;)</code>，那么应用在不同分辨率的设备上都只会显示<a href="mailto:`check@2x.png" target="_blank" rel="noopener">`check@2x.png</a>`图片，也就无法达到图片自适配的效果。</p>
</blockquote>
<h2 id="七、react-navigation"><a href="#七、react-navigation" class="headerlink" title="七、react-navigation"></a>七、react-navigation</h2><blockquote>
<p>文档 <a href="https://reactnavigation.org/docs/zh-Hans/getting-started.html" target="_blank" rel="noopener">https://reactnavigation.org/docs/zh-Hans/getting-started.html</a></p>
</blockquote>
<h3 id="7-1-页面切换"><a href="#7-1-页面切换" class="headerlink" title="7.1 页面切换"></a>7.1 页面切换</h3><ul>
<li>跳转到新的页面(将新路由推送到堆栈导航器，如果它尚未在堆栈中，则跳转到该页面) <code>this.props.navigation.navigate(&#39;Details&#39;,{})</code></li>
<li>不考虑现有导航历史的情况下添加其他路由 <code>this.props.navigation.push</code></li>
<li>返回 <code>this.props.navigation.goBack()</code></li>
<li>返回到堆栈中的第一个页面 <code>navigation.popToTop()</code></li>
</ul>
<h3 id="7-2-传递参数给路由"><a href="#7-2-传递参数给路由" class="headerlink" title="7.2 传递参数给路由"></a>7.2 传递参数给路由</h3><ul>
<li><code>navigate</code>接受可选的第二个参数，以便将参数传递给要导航到的路由。 例如：<code>this.props.navigation.navigate(&#39;RouteName&#39;, {paramName: &#39;value&#39;})</code>。</li>
<li>我们可以使用<code>this.props.navigation.getParam</code>读取参数</li>
<li>你也可以使用 <code>this.props.navigation.state.params</code>作为<code>getParam</code>的替代方案， 如果未指定参数，它的值是 <code>null</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 1. Navigate to the Details route with params */</span></span><br><span class="line"><span class="keyword">this</span>.props.navigation.navigate(<span class="string">'Details'</span>, &#123;</span><br><span class="line">  itemId: <span class="number">86</span>,</span><br><span class="line">  otherParam: <span class="string">'anything you want here'</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 2. Get the param, provide a fallback value if not available */</span></span><br><span class="line"><span class="keyword">const</span> &#123; navigation &#125; = <span class="keyword">this</span>.props;</span><br><span class="line"><span class="keyword">const</span> itemId = navigation.getParam(<span class="string">'itemId'</span>, <span class="string">'NO-ID'</span>);</span><br><span class="line"><span class="keyword">const</span> otherParam = navigation.getParam(<span class="string">'otherParam'</span>, <span class="string">'some default value'</span>);</span><br></pre></td></tr></table></figure>
<h3 id="7-3-配置标题栏"><a href="#7-3-配置标题栏" class="headerlink" title="7.3 配置标题栏"></a>7.3 配置标题栏</h3><blockquote>
<p>每个页面组件可以有一个名为<code>navigationOptions</code>的静态属性，它是一个对象或一个返回包含各种配置选项的对象的函数。我们用于设置标题栏的标题的是<code>title</code>这个属性，如以下示例所示</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">HomeScreen</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> navigationOptions = &#123;</span><br><span class="line">    title: <span class="string">'Home'</span>,</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/* render function, etc */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">DetailsScreen</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> navigationOptions = &#123;</span><br><span class="line">    title: <span class="string">'Details'</span>,</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/* render function, etc */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>createStackNavigator</code>默认情况下按照平台惯例设置，所以在<code>iOS</code>上标题居中，在<code>Android</code>上左对齐</p>
</blockquote>
<h4 id="7-3-1-动态设置标题"><a href="#7-3-1-动态设置标题" class="headerlink" title="7.3.1 动态设置标题"></a>7.3.1 动态设置标题</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">DetailsScreen</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> navigationOptions = <span class="function">(<span class="params">&#123; navigation &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      title: navigation.getParam(<span class="string">'otherParam'</span>, <span class="string">'A Nested Details Screen'</span>),</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/* render function, etc */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="7-3-2-使用setParams更新navigationOptions"><a href="#7-3-2-使用setParams更新navigationOptions" class="headerlink" title="7.3.2 使用setParams更新navigationOptions"></a>7.3.2 使用setParams更新navigationOptions</h4><blockquote>
<p>通常有必要从已加载的页面组件本身更新当前页面的<code>navigationOptions</code>配置。 我们可以使用<code>this.props.navigation.setParams</code>来做到这一点</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">/* Inside of render() */</span><br><span class="line"> <span class="tag">&lt;<span class="name">Button</span></span></span><br><span class="line"><span class="tag">   <span class="attr">title</span>=<span class="string">"Update the title"</span></span></span><br><span class="line"><span class="tag">   <span class="attr">onPress</span>=<span class="string">&#123;()</span> =&gt;</span> this.props.navigation.setParams(&#123;otherParam: 'Updated!'&#125;)&#125;</span><br><span class="line"> /&gt;</span><br></pre></td></tr></table></figure>
<h4 id="7-3-3-调整标题样式"><a href="#7-3-3-调整标题样式" class="headerlink" title="7.3.3 调整标题样式"></a>7.3.3 调整标题样式</h4><blockquote>
<p>定制标题样式时有三个关键属性：headerStyle、headerTintColor和headerTitleStyle</p>
</blockquote>
<ul>
<li><code>headerStyle</code>：一个应用于 <code>header</code> 的最外层 <code>View</code> 的 样式对象， 如果你设置 <code>backgroundColor</code> ，他就是<code>header</code> 的颜色</li>
<li><code>headerTintColor</code>：返回按钮和标题都使用这个属性作为它们的颜色。 在下面的例子中，我们将 <code>tint color</code> 设置为白色（#fff），所以返回按钮和标题栏标题将变为白色</li>
<li><code>headerTitleStyle</code>：如果我们想为标题定制<code>fontFamily</code>，<code>fontWeight</code>和其他<code>Text</code>样式属性，我们可以用它来完成。</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">HomeScreen</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> navigationOptions = &#123;</span><br><span class="line">    title: <span class="string">'Home'</span>,</span><br><span class="line">    headerStyle: &#123;</span><br><span class="line">      backgroundColor: <span class="string">'#f4511e'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    headerTintColor: <span class="string">'#fff'</span>,</span><br><span class="line">    headerTitleStyle: &#123;</span><br><span class="line">      fontWeight: <span class="string">'bold'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/* render function, etc */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="7-3-4-统一配置所有页面头部defaultNavigationOptions"><a href="#7-3-4-统一配置所有页面头部defaultNavigationOptions" class="headerlink" title="7.3.4 统一配置所有页面头部defaultNavigationOptions"></a>7.3.4 统一配置所有页面头部defaultNavigationOptions</h4><blockquote>
<p>在初始化时，还可以在 <code>stack navigator</code> 的配置中指定共享的<code>navigationOptions</code> 静态属性优先于该配置</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> Home = createStackNavigator(</span><br><span class="line">  &#123;</span><br><span class="line">    Feed: ExampleScreen,</span><br><span class="line">    Profile: ExampleScreen,</span><br><span class="line">  &#125;, &#123;</span><br><span class="line">    defaultNavigationOptions: &#123;</span><br><span class="line">      headerTintColor: <span class="string">'#fff'</span>,</span><br><span class="line">      headerStyle: &#123;</span><br><span class="line">        backgroundColor: <span class="string">'#000'</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">    navigationOptions: &#123;</span><br><span class="line">      tabBarLabel: <span class="string">'Home!'</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<h4 id="7-3-5-覆盖共享的navigationOptions"><a href="#7-3-5-覆盖共享的navigationOptions" class="headerlink" title="7.3.5 覆盖共享的navigationOptions"></a>7.3.5 覆盖共享的navigationOptions</h4><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">DetailsScreen</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> navigationOptions = <span class="function">(<span class="params">&#123; navigation, navigationOptions &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; params &#125; = navigation.state;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      title: params ? params.otherParam : <span class="string">'A Nested Details Screen'</span>,</span><br><span class="line">      <span class="comment">/* These values are used instead of the shared configuration! */</span></span><br><span class="line">      headerStyle: &#123;</span><br><span class="line">        backgroundColor: navigationOptions.headerTintColor,</span><br><span class="line">      &#125;,</span><br><span class="line">      headerTintColor: navigationOptions.headerStyle.backgroundColor,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/* render function, etc */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="7-4-标题栏和其所属的页面之间的交互"><a href="#7-4-标题栏和其所属的页面之间的交互" class="headerlink" title="7.4 标题栏和其所属的页面之间的交互"></a>7.4 标题栏和其所属的页面之间的交互</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">HomeScreen</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">static</span> navigationOptions = <span class="function">(<span class="params">&#123; navigation &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      headerTitle: <span class="xml"><span class="tag">&lt;<span class="name">LogoTitle</span> /&gt;</span></span>,</span><br><span class="line">      headerRight: (</span><br><span class="line">        &lt;Button</span><br><span class="line">          onPress=&#123;navigation.getParam(<span class="string">'increaseCount'</span>)&#125; <span class="comment">//执行事件</span></span><br><span class="line">          title=<span class="string">"+1"</span></span><br><span class="line">          color=<span class="string">"#fff"</span></span><br><span class="line">        /&gt;</span><br><span class="line">      ),</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  componentDidMount() &#123;</span><br><span class="line">    <span class="comment">// 设置事件</span></span><br><span class="line">    <span class="keyword">this</span>.props.navigation.setParams(&#123; <span class="attr">increaseCount</span>: <span class="keyword">this</span>._increaseCount &#125;);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  state = &#123;</span><br><span class="line">    count: <span class="number">0</span>,</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  _increaseCount = <span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">this</span>.setState(&#123; <span class="attr">count</span>: <span class="keyword">this</span>.state.count + <span class="number">1</span> &#125;);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/* later in the render function we display the count */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="八、打包"><a href="#八、打包" class="headerlink" title="八、打包"></a>八、打包</h2><h3 id="8-1-修改app名称、logo、启动图"><a href="#8-1-修改app名称、logo、启动图" class="headerlink" title="8.1 修改app名称、logo、启动图"></a>8.1 修改app名称、logo、启动图</h3><p><strong>修改图标和名称</strong></p>
<blockquote>
<p>找到根目录<code>/android/app/src/main/res</code></p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/540.png" alt></p>
<p><strong>启动页</strong></p>
<blockquote>
<ul>
<li>在<code>react-native</code>的<code>android</code>中的启动图和<code>IOS</code>不相同点在于，<code>android</code>没有默认的启动图，在<code>IOS</code>里面有</li>
<li>使用插件 <code>import SplashScreen from &#39;react-native-splash-screen&#39;;</code></li>
<li><a href="https://github.com/crazycodeboy/react-native-splash-screen" target="_blank" rel="noopener">https://github.com/crazycodeboy/react-native-splash-screen</a></li>
</ul>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/541.png" alt></p>
<p><strong>react-native ios端icon和启动图的设置</strong></p>
<blockquote>
<p><a href="https://www.jianshu.com/p/b49629529a95" target="_blank" rel="noopener">https://www.jianshu.com/p/b49629529a95</a></p>
</blockquote>
<h3 id="8-2-Android打包APK"><a href="#8-2-Android打包APK" class="headerlink" title="8.2 Android打包APK"></a>8.2 Android打包APK</h3><p><strong>1. 在Android/app目录下执行这条命令</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">keytool -genkey -v -keystore my-release-key.keystore -<span class="built_in">alias</span> my-key-alias -keyalg RSA -keysize 2048 -validity 10000</span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/542.png" alt></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">MYAPP_RELEASE_STORE_FILE=my-release-key.keystore</span><br><span class="line">MYAPP_RELEASE_KEY_ALIAS=my-key-alias</span><br><span class="line">MYAPP_RELEASE_STORE_PASSWORD=123456</span><br><span class="line">MYAPP_RELEASE_KEY_PASSWORD=123456</span><br></pre></td></tr></table></figure>
<p><strong>2. 在app/build.gradle中配置</strong></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">signingConfigs &#123;</span><br><span class="line">      release &#123;</span><br><span class="line">          if (project.hasProperty(&apos;MYAPP_RELEASE_STORE_FILE&apos;)) &#123;</span><br><span class="line">              storeFile file(MYAPP_RELEASE_STORE_FILE)</span><br><span class="line">              storePassword MYAPP_RELEASE_STORE_PASSWORD</span><br><span class="line">              keyAlias MYAPP_RELEASE_KEY_ALIAS</span><br><span class="line">              keyPassword MYAPP_RELEASE_KEY_PASSWORD</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  buildTypes &#123;</span><br><span class="line">      release &#123;</span><br><span class="line">          minifyEnabled enableProguardInReleaseBuilds</span><br><span class="line">          proguardFiles getDefaultProguardFile(&quot;proguard-android.txt&quot;), &quot;proguard-rules.pro&quot;</span><br><span class="line">          signingConfig signingConfigs.release</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p> <img src="https://poetries1.gitee.io/img-repo/2019/10/543.png" alt></p>
<p> <strong>3. 减少打包apk大小</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/544.png" alt></p>
<p> <strong>4. 输出目录</strong></p>
<blockquote>
<p><code>android/app/build/outputs/apk/</code></p>
</blockquote>
<h3 id="8-3-IOS打包"><a href="#8-3-IOS打包" class="headerlink" title="8.3 IOS打包"></a>8.3 IOS打包</h3><h2 id="九、更多参考"><a href="#九、更多参考" class="headerlink" title="九、更多参考"></a>九、更多参考</h2><ul>
<li><a href="https://github.com/poetries/react-native-components" target="_blank" rel="noopener">常用的react-native组件整理</a></li>
<li><a href="https://github.com/crazycodeboy/RNStudyNotes/" target="_blank" rel="noopener">React Native 研究与实践</a></li>
<li><a href="http://www.devio.org/2018/05/15/navigator-to-react-navigation/" target="_blank" rel="noopener">从navigator到react-navigation进阶教程</a></li>
<li><a href="http://www.devio.org/2017/12/12/React-Native0.50-Development-Guide-Chinese-update-instructions/" target="_blank" rel="noopener">React Native0.50+开发指导</a></li>
<li><a href="http://www.devio.org/2017/09/30/React-Native-integration-share-third-party-login-function-ios/" target="_blank" rel="noopener">React Native 集成分享第三方登录功能分享第三方登录模块开发(iOS)</a></li>
<li><a href="http://www.devio.org/2017/09/10/React-Native-integration-share-third-party-login-function/" target="_blank" rel="noopener">React Native 集成分享第三方登录功能分享第三方登录模块开发(Android)</a></li>
<li><a href="http://www.devio.org/2017/09/03/React-Native-Integrated-analysis-function/" target="_blank" rel="noopener">教你轻松在React Native中集成统计的功能</a></li>
<li><a href="http://www.devio.org/2017/08/18/Modify-the-React-Native-listening-port/" target="_blank" rel="noopener">教你轻松修改React Native端口</a></li>
<li><a href="http://www.devio.org/2017/07/12/quickly-create-react-native-app/" target="_blank" rel="noopener">React Native Android iOS 教程快速创建React Native App</a></li>
<li><a href="http://www.devio.org/2016/05/20/React-Native-development-environment-build-mac-platform/" target="_blank" rel="noopener">Mac(OSX)平台搭建React Native开发环境</a></li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2019/06/01/vue-api-analyse/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2019/06/08/taro-summary/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
